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内 容 拓 要 


CSS 选 择 器 是 CSS 世 界 的 支柱 ， 撑 起 了 整个 精彩 纷呈 的 CSS 世 界 。 
本 书 专门 介绍 CSS 选 择 器 的 相关 知识 。 在 本 书 中 ， 作 者 结合 多 年 从 业经 
验 ， 在 CSS 基 础 知识 之 上 ， 充 分 考虑 前 端 开发 人 员 的 开发 需求 ， 以 CSS 
选择 器 的 基本 概念 、 优 先 级 、 命 名 、 最 佳 实践 以 及 各 伪 类 选择 器 的 概述 
和 适用 场景 为 技术 主线 ， 为 CSS 开 发 人 员 介 绍 有 竞争 力 的 知识 和 技能 。 
此 外 ， 本 书 配 有 专门 的 网 站 ， 用 以 进行 实例 展示 和 问题 答疑 。 











作为 一 本 CSS 进 阶 书 ， 本 书 非常 适合 有 一 定 CSS 基 础 的 前 并 开发 人 
员 学 习 和 参考 。 


“CSS 世 界 三 部 须 ” 


“CSS 世 界 三 部 曲 ” 分 别 是 《CSS 世 界 》 


《CSS 选 择 器 世界 》 和 《CSS 
新 世界 》， 本 书 是 其 中 的 第 二 部 。 本 书 的 出 版 距离 第 一 部 《CSS 世 界 》 


出 版 近 两 年 时 间 ， 在 这 近 两 年 时 间 中 ，CSS 选 择 器 Level 4 规范 逐渐 稳 


定 ， 并 且 很 多 很 棒 的 特性 已 经 可 以 在 实际 项 目 中 应 用 。 我 觉得 时 机 成 熟 
了 ， 是 时 候 把 CSS 选 择 器 世界 的 米 


主演 


月 术 乡 











内 容 梳 理 一 番 呈 现 给 大 家 了 。 
CSS 选 择 器 是 CSS 志 界 的 支柱 ， 撑 起 了 整个 六 


青 彩 纷呈 的 CSS 世 界 ， 
作为 “CSS 世 界 三 部 曲 ”* 的 中 间 一 部 的 主题 再 合适 不 过 了 ， 承 上 启 下 ， 贯 
穿 所 有 。 


本 书 的 主要 内 容 
本 书 里 面 有 什么 ? 有 干货 。 


我 专注 于 CSS 领 域 已 经 十 多 年 了 。 很 多 人 觉得 很 奇怪 ，CSS 有 什么 
好 研究 的 。 上 怎么 说 呢 ? 就 好 比 ， 河 水 流动 、 侠 果 下 落 ， 这 些 虽 然 看 起 来 


都 是 理所当然 的 现象 ， 没 什么 好 研究 的 ， 但 实际 上 ， 一 旦 深入 ， 就 可 以 
从 这 些 简单 现象 中 发 现 新 的 世界 。 








然而 ， 发 现 与 探索 的 过 程 是 艰辛 的 ， 往 往 会 付出 很 多 ， 但 发 现 很 
少 ， 需 要 有 足够 的 热爱 以 及 钻研 精神 才能 坚持 下 去 并 有 所 收获 。 恰 好 ， 
我 就 是 这 种 类 型 的 人 ， 我 喜爱 技术 研究 ， 喜 欢 做 这 种 看 起 来 吃力 不 讨好 
的 事情 ， 但 这 些 年 的 坚持 也 让 我 有 了 足够 的 积累 。 本 书 的 内 容 束 是 我 根 
据 这 些 年 研究 总 结 出 来 的 精华 、 经 验 和 技巧 ， 也 就 是 说 ， 大 家 只 要 花 几 
小 时 扶 起 这 本 书 ， 就 能 学 到 我 花费 几 年 的 时 间 提 炼 出 来 的 东西 ， 这 些 东 
西 就 是 所 谓 的 “干货 ”， 它 们 是 技术 文档 和 技术 手册 上 没有 的 ， 是 稀缺 且 
独一无二 的 。 











而 这 些 稀缺 的 “干货 "， 就 是 你 和 普通 CSS 开 发 人 员 的 技术 分 水 岭 ， 
也 是 你 未 来 的 竞争 力 所 在 。 行 业 里 有 一 拨 儿 人 ， 也 上 自称 前 端 ， 但 是 只 停 
留 在 可 以 根据 设计 稿 写 出 页 面 这 种 水 平 ， 这 种 程度 的 人 没有 技术 优势 ， 
一 旦 年 龄 和 体力 跟 不 上 ， 将 很 容易 被 行业 淘汰 ， 因 此 你 需要 的 不 是 浮 于 
表面 的 那 一 点 知识 ， 而 是 更 有 深度 、 与 用 户 体 验 走 得 更 近 的 干货 和 技 


能 。 这 些 束 是 本 书 能 提供 给 你 的 。 




















正确 认识 本 书 








这 是 一 本 CSS 进 阶 书 ， 非 常 适合 有 一 定 CSS 基 础 的 前 端 人 员 学 习 和 
参考 ， 新 手 读 起 来 会 有 些 上 吃力， 因为 为 了 做 到 内 容 精 练 ， 书 中 会 直接 上 略 
去 过 于 基础 的 知识 。 


本 书 融 入 了 大 量 我 的 个 人 理解 ， 这 些 理解 是 我 多 年 持之以恒 对 CSS 
进行 研究 和 思考 后 ， 经 过 个 人 情感 润 饰 和 认 知 提 炬 获得 的 产物 。 因 此 ， 
与 干巴 巴 的 教条 式 的 技术 书 相 比 ， 本 书 要 显得 更 易于 理解 ， 有 温度 ， 更 





有 人 文 关怀 。 但 是 ， 个 人 的 理解 并 不 能 保证 百分之百 正确 ， 因 此 ， 本 书 
的 个 别 观点 也 可 能 不 对 ， 欢 迎 读者 提出 质疑 和 挑战 。 





由 于 规范 尚未 定 稳 ， 本 书 部 分 比较 前 沿 的 知识 点 在 未 来 会 发 生 某 些 
小 的 变动 ， 我 会 实时 跟 进 ， 并 在 官方 论坛 同步 更 新 。 


配套 网 站 


我 专门 为 “CSS 世 界 三 部 曲 ”* 制 作 了 一 个 网 站 
(https://www.cssworld.cn) ， 在 那里 ， 读 者 可 以 了 解 更 多 “CSS 世 界 三 部 
曲 ” 的 相关 信息 。 如 果 读 者 有 质疑 ， 想 挑战 ， 或 者 要 纠 错 ， 都 欢迎 去 官 
方 论坛 (https://bbs.cssworld.cn/) 对 应 版 块 进行 提问 或 反 饿 ， 也 欢迎 读 
者 加 微 信 zhangxinxu-job 和 我 直接 沟通 交流 。 
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资源 与 服务 


本 书 由 异步 社区 出 品 ， 社 区 (https://www.epubit.com/)〉 为 您 提供 后 
续 服 务 。 


提交 勘误 





作者 和 编辑 尽 最 大 努力 来 确保 书 中 内 容 的 准确 性 ， 但 难免 会 存在 下 
漏 。 欢 迎 您 将 发 现 的 问题 反馈 给 我 们 ， 帮 助 我 们 提升 图 书 的 质量 。 








当 您 发 现 错误 时 ， 请 登录 异步 社区 ， 按 书 名 搜索 ， 进 入 本 书页 面 ， 
单 击 “ 提 交 勘 误 ”， 输 入 勘误 信息 ， 单 击 “ 提 交 ” 按 钮 即 可 ( 见 下 图 )。 本 
书 的 作者 和 编辑 会 对 您 提交 的 勘误 进行 审核 ， 确 认 并 接受 后 ， 您 将 获 赠 
异步 社区 的 100 积 分 。 积 分 可 用 于 在 异步 社区 部 换 优惠 券 、 样 书 或 交 


器 
口 口 








与 我 们 联系 

我 们 的 联系 邮箱 是 contact@epubit.com.cn。 

如 果 您 对 本 书 有 任何 疑问 或 建议 ， 请 您 发 邮件 给 我 们 ， 并 请 在 邮件 
标题 中 注 明 本 书 书 名 ， 以 便 我 们 更 高 效 地 做 出 反馈 。 


如 果 您 有 兴趣 出 版 图 书 、 录 制 教学 视频 ， 或 者 参与 图 书 翻译 、 技 术 
审 校 等 工作 ， 可 以 发 邮件 给 我 们 ;， 有意 出 版 图 书 的 作者 也 可 以 到 异步 社 
区 在 线 提交 投稿 (直接 访问 www.epubit.com/ selfpublish/submission 即 
可 





如 果 您 来 自学 校 、 培 训 机 构 或 企业 ， 想 批量 购买 本 书 或 异步 社区 出 
版 的 其 他 图 书 ， 也 可 以 及 邮件 给 我 们 。 


如 果 您 在 网 上 发 现 有 针对 异步 社区 出 品 图 书 的 各 种 形式 的 盗版 行 
为 ， 包 括 对 图 书 全 部 或 部 分 内 容 的 非 授权 传播 ， 请 您 将 怀疑 有 侵权 行为 








的 链接 发 邮件 给 我 们 。 您 的 这 一 举动 是 对 作者 权益 的 保护 ， 也 是 我 们 持 
续 为 您 提供 有 价值 的 内 容 的 动力 之 源 。 


天 于 开 步 社区 和 有 异步 图 书 


“ 寞 步 社区 ”是 人 民 邮 电 出 版 社 旗下 IT 专 业 图 书社 区 ， 致 力 于 出 版 精 
品 IT 技术 图 书 和 相关 学 习 产 品 ， 为 作 译 者 提供 优质 出 版 服务 。 异 步 社 区 
创办 于 2015 年 8 月 ， 提 供 大 量 精品 IT 技术 图 书 和 电子 书 ， 以 及 高 品质 技 
术 文 章 和 视频 谍 程 。 更 多 详情 请 访问 异步 社区 官网 


https://www.epubit.com 。 








“异步 图 书 ” 是 由 异步 社区 编辑 团队 集 划 出 版 的 精品 开 专 业 图 书 的 品 
牌 ， 依 托 于 人 民 邮 电 出 版 社 近 30 年 的 计算 机 图 书 出 版 积累 和 专业 编辑 团 
队 ， 相 关 图 书 在 封面 上 印 有 异步 图 书 的 LOGO。 腊 步 图 书 的 出 版 领域 包 
括 软件 开发 、 大 数据 、AI、 测 试 、 前 端 、 网 络 技术 等 。 





异步 社区 





第 1 章 ”概述 





CSS 选 择 器 本 映 很 简单 ， 就 是 一 些 特 定 的 选择 符号 ， 于 是 ， 很 多 开 
发 者 束 认 为 CSS 选 择 右 的 世界 很 简单 ， 没 什么 好 学 的 ， 这 样 的 想法 严重 
限制 了 开发 者 的 技术 提升 。 实 际 上 ，CSS 选 择 器 非常 强大 ， 它 不 仅 涉及 
视觉 表现 ， 而 且 与 用 户 安全 、 用 户 体验 有 非常 密切 的 联系 。 





1.1 为 什么 CSS 选 择 器 很 强 
CSS 选 择 器 能 够 做 的 事情 远 比 你 预想 的 多 得 多 。 


不 少 开 及 人 员 学 习 JavaScript 得 心 应 手 ， 但 是 学 习 CSS 却 总 是 没有 感 
， 因 为 他 们 还 是 习惯 把 CSS 属 性 或 者 CSS 选 择 圳 看 成 一 个 个 独立 的 个 
体 ， 就 好 像 传统 编程 语言 中 的 一 个 个 API 一 样 。 传 统 编程 语言 讲求 逻辑 
清晰 ， 层 次 分 明 ， 主 要 为 功能 服务 ， 因 此 这 种 不 拖泥带水 的 API 是 非常 
有 必要 的 。 但 CSS 却 是 为 样式 服务 的 ， 它 重 表现 ， 轻 逻辑 ， 如 同人 的 思 
想 一 样 ， 相 互 碰撞 才能 产生 火花 。 


ml 


尤其 对 于 CSS 选 择 器 ， 它 作为 CSS 世 界 的 支柱 ， 其 作用 好 比 人 类 的 
疹 柱 ， 与 HIML 结 构 、 浏 览 器 行为 、 用 户 行为 以 及 整个 CSS 世 界 相互 依 
存 、 相 互 作用 ， 这 必然 会 产生 很 多 磁 撞 ， 让 CSS 选 择 器 变 得 非常 强悍 。 





同时 ，CSS 选 择 占 本 里 也 并 非 你 想 得 那 么 单纯 。 


1.2 CSS 选择 器 世界 的 一 些 基 本 概念 


我 们 平常 所 说 的 CSS 选 择 器 实际 上 是 一 个 统称 ， 是 很 多 基本 概念 的 
集合 ， 在 正式 开始 介绍 本 书 的 内 容 之 前 ， 我 们 有 必要 先 了 解 一 下 这 些 基 





1.2.1 选择 器 、 选 择 符 、 伪 类 和 伪 元 素 
CSS 选 择 器 可 以 分 为 4 类 ， 即 选择 器 、 选 择 符 、 伪 类 和 伪 元 素 。 
1. 选择 器 


这 里 的 “选择 器 ” 指 的 就 是 平常 使 用 的 CSS 声 明 块 前 面 的 标签 、 类 名 
等 。 例 如 : 
这 里 的 body 就 是 一 种 选择 器 ， 是 类 型 选择 器 ， 也 可 以 称 为 标签 选择 


日 号 


了 To 


.Container { background-color: olive; } 


这 里 的 .container 也 是 选择 器 ， 属 于 属性 选择 器 的 一 种 ， 我 们 平 
时 称 其 为 类 选择 器 。 


还 有 很 多 其 他 种 类 的 选择 嚣 ， 后 面 将 会 详细 介绍 。 


2. 选择 符 


目前 我 所 知道 的 CSS 选 择 需 世界 中 的 选择 符 有 5 个 ， 即 表示 后 代 关 
系 的 空格 〈 ) ， 表 示 父 子 关 系 的 尖 插 号 〈>) ， 表 示 相 邻 兄 第 关 系 的 加 
号 〈+) ， 表 示 兄 前头 系 的 这 这 〈~) ， 以 及 表示 列 关 系 的 双 管 道 
Cs 


这 5 种 选择 符 分 别 示 意 如 下 : 


/* 后 代 关 系 */ 

.Ccontainer img { object-fit: cover; } 
/* 父子 关系 */ 

ol > li { margin: .5em 6; } 


/* 相 邻 兄弟 关系 */ 


button + button { margin-left: 16px; } 

/* 兄弟 关系 */ 

button ~ button { margin-left: 16px; } 

/* 列 */ 

.col || td { background-color: skyblue; } 





关于 选择 符 的 更 多 知识 可 以 参见 第 4 章 。 





伪 类 的 特征 是 其 前 面 会 有 一 个 冒号 〈:) ， 通 和 常 与 浏览 右 行 为 和 用 
户 行 为 相关 联 ， 可 以 看 成 是 CSS 世 界 的 JavaScript。 伪 类 和 选择 符 相 互 配 
合 可 以 实现 非常 多 的 纯 CSS 交 互 效 果 。 


例如 : 


a:hover { color: darkblue; } 


4. 伪 元 素 





伪 元 素 的 特征 是 其 前 面 会 有 两 个 冒号 (::) ， 销 见 的 
有 ::before，::after，::first- letter 和 : :first-line 等 。 


本 书 不 会 对 伪 元 素 做 专门 的 介绍 ， 读 者 天 有 兴趣 可 以 参见 《CSS 世 
界 》 和 以 后 会 出 版 的 《CSS 新 世界 》 的 相关 章节 


1.2.2 CSS 选择 器 的 作用 域 





以 前 CSS 选 择 器 只 有 一 个 全 局 作用 域 ， 也 就 是 在 网 页 任意 地 方 的 
CSS 都 共用 一 个 文档 上 下 文 。 


如 今 CSS 选 择 器 是 有 局 部 作用 域 的 概念 的 。 伪 类 :scope 的 设计 初衷 
就 是 匹配 局 部 作用 域 下 的 元 素 。 例 如 ， 对 于 下 面 的 代码 : 


<Sectiony> 
<style scoped> 
p { color: blue; } 
:scope { background-color: red; } 


</style> 
<p> 在 作用 域内 ， 背 景色 应 该 红色 。</py> 
</section> 


<p> 在 作用 域外 ， 默 认 背 景色 。</p> 





























理论 上 ，<section> 标 签 里 面 的 <p> 元 素 的 背景 色 应 该 是 红色 ,但 
目前 没有 任何 浏览 器 表现 为 红色 。 实 际 上 此 特性 曾 被 浏览 器 支持 过 ， 但 
只 是 县 花 一 现 ， 现 在 已 经 被 舍弃 。 目 前 虽然 伪 类 :scope 也 能 解析 ， 但 
只 能 当 作 全 局 作用 域 。 但 是 ， 这 并 不 表示 :scope 一 无 是 处 ， 它 在 





JavaScript 中 还 是 有 效 的 ， 这 一 点 将 在 12.1.1 节 中 进一步 展开 介绍 。 


另外 ，CSS 选 择 器 的 局 部 作用 域 在 Shadow DOM 中 也 是 有 效 的 。 例 
如 ， 有 一 个 <div> 元 素 : 


<div id="hostElement"></div> 


然后 使 用 Shadow DOM 为 这 个 <div> 元 素 创建 一 个 <p> 元 素 并 且 控 制 
其 背景 色 的 样式 ， 如 下 : 





// 创建 shadow DOM 

var shadow = hostElement.attachShadow({mode: 'open'}); 

// 给 Shadow DOM 添 加 文字 

shadow.innerHTML = '<p> 我 是 由 Shadow DOM 创 建 的 &1t;p&gt ;元 素 ， 我 的 背景 色 是 ? </p 























>'; 

// 添加 CSSs，p 标 签 背景 色 变 成 黑色 
shadow.innerHTML += '<style>p { background-color: #333; color: #fff; }</st 
yle>'; 





结果 如 图 1-1 所 示 ，Shadow DOM 创 建 的 <p> 元 素 的 背景 色 是 黑色 ， 
而 页 面 原本 的 <p> 元 素 的 背景 色 不 受 任何 影响 。 





我 是 一 个 普通 的 <p> 元 素 ， 我 的 背景 色 是 ? 


我 是 由 Shadow DOM 创 建 的 《p> 元素 ， 我 的 背景 色 是 ? 














图 1-1 页 面 原本 的 <p> 元 素 的 背景 色 不 受 任何 影响 











上 面 的 CSS 选 择 器 的 局 部 作用 示例 都 配 有 演示 页 面 ， 读 者 可 以 手动 
输入 https://demo.cssworld. cn/selector/1/2-1.php 或 扫描 下 面 的 二 维 码 杀 自 
体验 与 学 可 5 





1.2.3 CSS 选择 器 的 命名 空间 


CSS 选 择 器 中 还 有 一 个 命名 空间 (namespace) 的 概念 ， 这 里 简单 介 
绍 一 下 。 





命名 空间 可 以 让 来 自 多 个 XML 词汇 表 的 元 素 的 属性 或 样式 彼此 之 
间 没 有 冲突 ， 它 的 使 用 非常 常见 ， 例 如 XHTML 文 档 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 


又 例如 SVG 文件 的 命名 空间 : 


上 述 代 码 中 的 xmlns 属 性 值 对 应 的 URL 地 址 就 是 一 个 简单 的 命名 空 
间 名 称 ， 其 并 不 指向 实际 的 在 线 地 址 ， 浏 览 器 不 会 使 用 或 处 理 这 个 
URL., 





在 CSS 选 择 器 世界 中 命名 空间 的 作用 也 是 避免 冲突 。 例 如 ， 在 
HTML 和 SVG 中 都 会 用 到 <a> 链 接 ， 此 时 就 可 能 发 生 冲 突 ， 我 们 可 以 借 





助 命名 空间 进行 规避 ， 具 体 方法 是 ， 使 用 @namespace 规 则 声明 命名 空 
间 : 


@namespace url(http://www.w3.org/1999/xhtml); 
@namespace svg url(http://www.w3.org/26060/svg); 
/* XHTML 中 的 <a> 元 素 */ 

a {} 


/* SVG 中 <a> 元 素 */ 
svgla {} 
/* 同时 匹配 XHTML 和 SVG 的 <a> 元 素 */ 
*|a {} 








注意 ， 上 述 CSS 代 码 中 的 svg 也 可 以 换 成 其 他 字符 ， 这 里 的 svg 并 不 
是 表示 svg 标 签 的 意思 。 








眼见 为 实 ， 我 们 通过 一 个 实际 案例 来 直观 地 了 解 一 下 CSS 选 择 器 的 
命名 空间 。HTML 和 CSS 代 码 如 下 : 





<p> 这 是 文字 : <a href> 点 击 刷 新 </a></p> 
<p> 这 是 SVG: <svg><a xlink:href><path d="..."/></a></svg></p> 
@namespace "http://www.w3.org/1999/xhtml"; 





@namespace svg "http://www.w3.org/26000/svg"; 
svg|a { color: black; fill: currentColor; } 
a { color: gray; } 











ad -个 管道 符 |， 管 道 符 前 面 的 字符 表示 命名 空间 的 代 
称 ， 管 道 符 后 面 的 内 容 则 是 选择 器 。 本 例 的 代码 表示 
在 http://www.w3.org/2668/svg 这 个 命名 空间 下 所 有 <ay> 的 颜色 都 
古 black， 由 于 xhtml 的 命名 空间 也 家 指 定 了 ， 因 此 SVG 中 的 <a> 束 不 会 
受 标签 选择 占 a 的 影响 ， 即 便 纯 标签 选择 絮 a 的 优先 级 再 高 也 无 效 。 





最 终 的 效果 如 图 1-2 所 示 ， 文 字 链 接 颜 色 为 灰色 ，SVG 图 标 颜色 为 


黑色 
Nn 9 


图 1-2 ”不同 命名 空间 下 的 样式 保护 


眼见 为 实 ， 读 者 可 以 手动 输入 https://demo.cssworld.cn/selector/1/2- 
2.php 或 扫描 下 面 的 二 维 码 亲自 体验 与 学 习 。 


加 3 加 












CSS 选 择 器 命名 空间 的 兼容 性 很 好 ， 至 少 10 年 前 浏览 器 就 已 支持 ， 
但 是 ， 却 很 少见 人 在 项 目 中 使 用 它 ， 这 是 为 什么 呢 ? 


原因 有 二 : 其 一 ， 在 HTML 中 直接 内 联 SVG 的 应 用 场景 并 不 多 ， 它 
更 多 的 是 作为 独立 的 SVG 资源 使 用 ， 即 使 内 联 ， 也 很 少 有 需要 对 特性 
SVG 标签 进行 样式 控制 的 需求 ， 其 二 ， 有 其 他 更 简单 的 替代 方案 ， 例 
如 ， 如 果 我 们 希望 SVG 中 所 有 的 <a> 元 素 的 颜色 都 是 black， 可 以 直接 
用 : 


svg a { color: black; } 


无 须 向 握 复杂 的 命名 空间 语法 束 能 实现 我 们 想 要 的 效果 ， 这 样 做 的 
唯一 缺点 就 是 增加 了 SVG 中 a 元 素 的 优先 级 ， 但 是 在 大 多 数 场景 下 ， 这 





对 我 们 的 实际 开发 没有 任何 影响 。 纤 合 来 看 ， 这 是 一 种 性 价 比 高 很 多 的 
实现 方式 ， 几 乎 找 不 到 需要 使 用 命名 空间 的 理由 。 


因此 ， 对 于 CSS 选 择 器 的 命名 空间 ， 我 给 大 家 的 建议 吏 是 了 解 即 
可 ， 做 到 在 遇 到 大 规模 冲突 场景 时 ， 能 想到 还 有 这 样 一 种 解决 方法 就 可 
»: 





1.3 无效 CSS 选 择 需 特性 与 实际 应 用 





很 多 CSS 伪 类 选择 器 是 最 近 几 年 才 出 现 的 ， 浏 览 器 并 不 文 持 ， 浏 览 
器 会 把 这 些 选 择 器 当 作 无 效 选择 器 ， 这 是 没有 任何 问题 的 。 但 是 当 这 些 
无 效 的 CSS 选 择 器 和 浏览 器 支持 的 CSS 选 择 器 写 在 一 起 的 时 候 ， 会 导致 
整个 选择 器 无 效 ， 举 个 例子 ， 有 如 下 CSS 代 码 : 





.example:hover, 
.example:active, 


.example:focus-within { 
color: red; 


} 





:hover 和 :active 是 浏览 器 很 早 束 支持 的 两 个 伪 类 ， 按 道理 讲 ， 所 
有 浏览 器 都 能 识别 这 两 个 伪 类 ， 但 是 ， 由 于 下 浏览 器 并 不 支持 :focus- 
within 伪 类 ， 会 导致 正 浏览 器 无 法 识别 整个 语句 ， 这 就 是 无 效 CSS 选 择 


甫 特性 。 


因此 ， 我 们 在 使 用 一 些 新 的 CSS 选 择 右 时 ， 出 于 渐进 增强 的 目的 ， 
要 将 它们 分 开 书 写 : 


/* IE 浏览 器 可 识别 */ 

.example:hover., 

.example:active { 
color: red; 


} 

/* IE 浏览 器 不 可 识别 */ 

.example:focus-within { 
color: red; 


} 





不 过 ， 在 诸多 CSS 选 择 器 中 ， 这 种 无 效 选 择 器 特性 出 现 了 一 个 例 
外 ， 那 就 是 浏览 器 可 以 识别 以 -webkit- 私 有 前 缀 开头 的 伪 元 素 。 例 
如 ， 下 面 这 段 CSS 选 择 器 就 是 无 效 的 : 


div, span::whatever { 
background: gray; 
} 





但 是 ， 如 果 加 上 一 个 -webkit- 私 有 前 级 ， 浏 览 器 就 可 以 识别 
下 <div> 元 素 背 景 为 灰色 ， 如 图 1-3 所 示 : 





div, span::-webkit-whatever { 
background: gray; 
} 








[x 口 ] Elements Console Sources Network Performance 
Styl Computed L 

html lang="en ea 

bp <head>..</head 





JIV， span:: eDKit nateVver 
background:* 国 gray; 
图 1-3 div 背景 为 gray 


除了 正 浏 览 器 ， 其 他 浏览 器 均 支 持 (Firefox 63 及 以 上 版 本 文 持 ) 识 


别 这 个 -webkit- 无 效 伪 元 素 的 特性 。 于 是 ， 我 们 就 可 以 灵活 运用 这 种 
特性 来 帮助 完成 实际 开发 。 例 如 ， 对 正 浏 览 右 和 其 他 浏览 器 进行 精准 区 


/* IE 浏览 器 */ 
.example { 
background: black; 


} 
/* 其 他 浏览 


.example, :: Re { 
background: gray; 
} 





当然 ， 上 面 的 无 效 伪 类 会 导致 整 行 选择 右 失 效 的 特性 也 可 以 用 来 区 
分 浏览 ay 


第 2 章 CSS 选 择 需 的 优先 级 


几乎 所 有 的 CSS 样 式 冲突 、 样 式 窗 盖 等 问题 都 与 CSS 声 明 的 优先 级 
划 位 有 关 。 因 此 ， 在 详细 阐述 CSS 选 择 占 的 优先 级 规则 之 前 ， 我 们 先 快 
速 了 解 一 下 CSS 全 部 的 优先 级 规则 。 


2.1 ”CSS 优先 级 规则 概览 
CSS 优 先 级 有 着 明显 的 不 可 和 逾越 的 等 级 制度 ， 我 将 其 划分 为 0 一 5 这 


6 个 等 级 ， 其 中 前 4 个 等 级 由 CSS 选 择 器 决定 ， 后 2 个 等 级 由 书写 形式 和 
特定 语法 决定 。 下 面 我 将 对 这 6 个 等 级 分 别 进行 讲解 。 








(1) 0 级 : 通 配 选 择 右 、 选 择 符 和 逮 辑 组 合 伪 类 。 其 中 ， 通 配 选 择 
器 写作 星 号 〈*#) 。 示 例如 下 : 


* { color: #0606;j } 


选择 符 指 +、>、~、 空 格 和 | | 。 关 于 选择 符 的 更 多 知识 可 参见 第 4 





地 


逻辑 组 合 伪 类 有 :not()、:is() 和 :where 等 ， 这 些 伪 类 本 身 并 不 
影响 CSS 优 先 级 ， 影 响 优先 级 的 是 括号 里 面 的 选择 器 。 


:not() {} 





是 ， 只 有 巡 辑 组 合 伪 类 的 优先 级 是 9， 其 他 伪 类 的 优先 
级 并 不 是 这 样 的 。 





皆 
. 
斑 
ll 
型 


(2) 1 级 : 标签 选择 妖 。 示 例如 下 : 
body { color: #333; } 
(3) 2 级 : 类 选择 器 、 属 性 选择 器 和 伪 类 。 示 例如 下 : 


.foo { color: #666; } 
[foo] { color: #666; } 
:hover { color: #333; } 


(4) 3 级 : ID 选择 器 。 示 例如 下 : 


#foo { color: #999; } 


(5) 4 级 : style 属 性 内 联 。 示例 如 下 : 
<span style="color: #ccc;"> 优 先 级 </ span> 


(6) 5 级 : !important。 示 例如 下 : 


.foo { color: #fff !important; } 


!important 是 顶级 优先 级 ， 可 以 重 置 JavaScript 设 置 的 样式 ， 唯 一 
推荐 使 用 的 场景 就 是 使 JavaScript 设 置 无 效 。 例 如 : 


.foo[style*="color: #ccc"] { 


color: #fff !important; 
} 





对 于 其 他 场景 没有 任何 使 用 它 的 理由 ， 切 勿 滥 

不 难看 出 ，CSS 选 择 器 的 优先 级 (0 级 至 3 级 ) 属于 CSS 优 先 级 的 一 
部 分 ， 也 是 最 重要 、 最 复杂 的 部 分 ， 学 会 CSS 选 择 器 的 优先 级 等 同 于 学 
会 了 完整 的 CSS 优 先 级 规则 。 





2.2 ”深入 CSS 选 择 器 优先 级 


本 贡 内 容 将 有 助 于 深入 理解 CSS 选 择 器 的 优先 级 ， 包 括 计 算 规 则 、 
实用 技巧 以 及 一 些 奇 怪 的 有 趣 特性 。 


2.2.1 ”CSS 选择 如 优先 级 的 计算 规则 


对 于 CSS 选 择 器 优先 级 的 计算 ， 业 界 流传 其 广 的 是 数值 计数 法 。 具 
体 如 下 : 每 一 段 CSS 语 句 的 选择 器 都 可 以 对 应 一 个 具体 的 数值 ， 数 值 越 
大 优先 级 越 高 ， 其 中 的 CSS 语 句 将 被 优先 演 染 。 其 中 ， 出 现 一 个 0 级 选 
择 器 ， 优 先 级 数值 +0; 出 现 一 个 1 级 选择 器 ， 优 先 级 数值 +1; 出 现 一 个 2 
级 选择 器 ， 优 先 级 数值 +10;， 出 现 一 个 3 级 选择 右 ， 优 先 级 数值 +100。 





于 是 ， 有 表 2-1 所 示 的 计算 结果 。 








表 2-1 选择 器 优先 级 计算 值 





计算 细则 








* { 0 “| 1 个 0 级 通 配 选择 器 ， 优 先 级 数值 为 0 


dialog {} 


ee 


li >ol+ol {} 
1+6+1+6+1 


a:not([rel=nofollow]) pe 1 个 0 级 否定 伪 类 ，1 个 2 级 








1 个 1 级 标签 选择 占 ， 优 先 级 数值 为 1 








2 个 1 级 标签 选择 器 ，1 个 0 级 选择 符 ， 优 先 级 数值 为 
1+0+1 





3 个 1 级 标签 选择 器 ，2 个 0 级 选择 符 ， 优 先 级 数值 为 





1 个 2 级 类 名 选择 器 ， 优 先 级 数值 为 10 











{} 


ol 1i.foo {} 


li.foo.bar {} 
0 


器 ， 优 先 级 数值 为 1+0+10 





1 个 1 级 标签 选择 占 ，1 个 2 级 伪 类 ， 优 先 级 数值 为 1+10 


1 个 2 级 类 名 选择 器 ，2 个 1 级 标签 选择 器 ，1 个 0 级 空格 选 
择 符 ， 优 先 级 数值 为 1+0+1+10 














2 个 2 级 类 名 选择 器 ，1 个 1 级 标签 选择 器 ， 优 先 级 数值 为 
10x2+1 





1 个 3 级 ID 选择 器 ， 优 先 级 数值 为 100 











1 个 3 级 ID 选择 器 ，1 个 2 级 类 名 选择 器 ，1 个 1 级 标签 选择 





#foo .bar p {} 111 | 器 ， 优 先 级 数值 为 100+10+11 


趁 热 打铁 ， 我 出 一 个 小 题 考 考 大 家 ，<body> 元 素 的 颜色 是 红色 还 


是 蓝 色 ? 


<htm] lang="zh-CN"> 
<body class="foo" > 颜色 是 ? </bodyy> 





</html> 
body.foo:not([dir]) { color: red; } 
html[lang] > .foo { color: blue; } 





我 们 先 来 计算 一 下 各 自 的 优先 级 数值 。 


首先 是 body.foo:not([dir])， 出 现 了 1 个 标签 选择 器 body，1 个 
类 名 选择 器 .foo 和 1 个 否定 伪 类 :not， 以 及 属性 选择 器 [dir]， 计 算 结 
果 是 1+10+0+10， 也 就 是 21。 

接 下 来 是 html[1lang] > body.foo， 出 现 了 1 个 标签 选择 
器 htm1，1 个 属性 选择 器 [lang] 和 1 个 类 名 选择 器 .foo， 计 算 结果 是 
1+10+10， 也 就 是 21。 





这 两 个 选择 器 的 计算 值 大 然 是 一 样 的 ， 那 该 怎么 演 染 呢 ? 


这 就 引出 了 力 外 一 个 重要 的 规则 一 一 “后 来 大 上 ”。 也 就 是 说 ， 当 
CSS 选 择 器 的 优先 级 数值 一 样 的 时 候 ， 后 泻 染 的 选择 占 的 优先 级 更 高 。 
因此 ， 上 题 的 最 终 颜 色 是 赣 色 (blue) 。 


后 渲染 优先 级 更 高 的 规则 是 相对 于 整个 页 面 文档 而 言 的 ， 而 不 仅仅 


是 在 一 个 单独 的 CSS 文 件 中 。 例 如 : 


<Sstyle>body { color: red; }</style> 


<link rel="stylesheet" href="a.css"> 
<link rel="stylesheet" href="b.css"> 





其 中 在 a.css 中 有 : 
body { color: yellow; } 
在 b.css 中 有 : 

body { color: blue; } 


此 时 ，body 的 颜色 是 蓝 色 ， 如 图 2-1 所 示 ， 因 为 blue 这 段 CSS 语 句 
在 文档 中 是 最 后 出 现 的 。 








body 1 b.css:1 
color: 国 blue; 





图 2-1 浏览 器 中 body 颜 色 的 优先 级 


还 有 一 个 误区 有 必要 强调 一 下 ， 那 就 是 CSS 选 择 器 的 优先 级 与 DOM 
元 素 的 层级 位 置 没有 任何 关系 。 例 如 : 


body .foo { color: red; } 
html .foo { color: blue; } 


请 问 .foo 的 颜色 是 红色 还 是 蓝 色 ? 


答案 是 蓝 色 。 虽 然 <body> 是 <htm1> 的 子 元 素 ， 离 .foo 的 距离 更 
近 ， 但 是 选择 器 的 优先 级 并 不 考虑 DOM 的 位 置 ， 所 以 后 面 的 
html .foof{} 的 优先 级 更 高 。 


1. 增加 CSS 选 择 器 优先 级 的 小 技巧 


实际 开发 时 ， 难 免 会 过 到 需要 增加 CSS 选 择 需 优先 级 的 场景 。 例 
如 ， 和 希望 增加 下 面 .foo 类 名 选择 器 的 权重 : 


.foo { color: #333; } 


很 多 人 的 做 法 是 增加 内 套 ， 例 如 ; 


.father .foo {} 


或 者 是 增加 一 个 标签 选择 器， 例如 : 


div.foo {} 


但 这 些 都 不 是 最 好 的 方法 ， 因 为 这 些 方 法 增加 了 耦合 ， 降 低 了 可 维 
护 性 ， 一 旦 哪 天 父 元 素 类 名 变化 了 ， 或 者 标签 换 了， 样式 央 不 是 束 失 效 
了 ? 这 里 给 大 家 介绍 一 个 增加 CSS 选 择 占 优先 级 的 小 拉 巧 ， 那 就 是 重复 
选择 天 自身。 例如， 可 以 像 下 面 这 样 做 ， 既 提高 了 优先 级 ， 又 不 会 增加 
耦合 ， 实 在 是 上 上 之 选 : 


.foo .foo {} 








如 果 你 实在 不 喜欢 这 种 写法 ， 借 助 必 然 会 存在 的 属性 选择 器 也 是 不 
错 的 方法 。 例 如 : 


#foo[id] {} 
2. 对 数值 计数 法 的 点 评 


上 面 提 到 的 CSS 选 择 器 优先 级 数值 的 计数 法 实际 上 是 一 个 不 严谨 的 
方法 ， 因 为 1 和 10 之 间 的 差距 实在 太 小 了 ， 这 也 就 意味 者 连续 10 个 标签 
选择 器 的 优先 级 就 和 1 个 类 名 选择 器 齐 平 了 。 然 而 事实 并 非 如 此 ， 不 同 
等 级 的 选择 器 之 间 的 差距 是 无 法 跨越 的 存在 。 但 由 于 在 实际 开发 中 ， 我 
们 是 不 会 连续 写 上 多 达 10 个 选择 右 的 ， 因 此 不 会 影响 我 们 在 实际 开发 过 
程 中 计算 选择 器 优先 级 。 











而 且 对 于 使 用 CSS 选 择 右 而 言 ， 你 的 书写 习惯 远 比 知识 更 重要 ， 史 
算 你 理论 知识 再 扎实 ， 如 果 平时 书写 习惯 糟糕 ， 也 无 法 避免 CSS 样 式 顽 
盖 问 题 、 样 式 冲 突 等 问题 的 出 现 。 我 将 在 第 3 章 中 深入 探讨 这 个 问题 。 
因此 ， 对 于 数值 计算 法 ， 我 的 态度 是 ， 学 一 过 即 可 ， 没 有 必要 反复 攻 
读 ， 做 到 面面俱到 ， 只 要 你 习惯 足够 好 ， 是 不 会 遇 到 乱七八糟 的 优先 级 


问题 的 。 

















在 CSS 选 择 器 这 里 ， 等 级 真 的 是 无 法 跨越 的 鸿沟 吗 ? 其 实 不 是 ， 这 
里 有 大 家 不 知道 的 冷 知识 。 


2.2.2 ”256 个 选择 絮 的 越级 现象 


有 如 下 HTML : 





<span id="foo” class="f"> 颜 色 是 ? </spany> 








如 下 CSS: 


#foo { color: #066; background: #eee; } 
.f { color: #fff; background: #333; } 





很 显然 ， 文 字 的 颜色 是 #68686， 即 黑色 ， 因 为 ID 选择 器 的 级 别 比 类 
名 选择 器 的 级 别 高 一 级 。 但 是 ， 如 果 是 下 面 的 CSS 呢 ?256 个 .f 类 名 合 
体 : 


x 
山路 二 路 二 二 二 二 


WwW 


中 四 中 四 路 二 二 
路 中路 路 路 二 二 本 
出 路 二 路 路 路 中 中 
十 十 赴 赴 十 赴 十 
路 中路 四 中路 中 但 
直路 hh 
hh 中 hho 
ey 
十 十 赴 十 十 十 十 
十 十 十 十 十 十 十 三 
十 十 十 赴 十 十 十 世 
十 十 十 二 十 十 十 
十 十 十 直 十 十 十 





在 了 正 浏览 器 下 ， 神 奇 的 事情 发 生 了 ， 文 字 的 颜色 表现 为 白色 ， 背 景 
色 表 现 为 深 色 ， 如 图 2-2 所 示 。 





图 2-2 IE 浏览 器 中 类 名 的 优先 级 更 高 


在 下 浏览 器 下 ， 读 者 可 以 输入 https://demo.cssworld.cn/selector/2/2- 
1.php 亲 上 自体 验 与 学 习 。 


同样 ，256 个 标签 选择 器 的 优先 级 大 于 类 名 选择 器 的 优先 级 的 现象 
也 是 存在 的 。 


实际 上 ， 在 过 去 ，Chrome 浏 览 咽 、Firefox 浏 览 器 下 都 出 现 过 这 种 
256 个 选择 器 的 优先 级 大 于 上 一 个 选择 器 级 别 的 现象 ， 后 来 ， 大 约 2015 
年 之 后 ，Chrome 浏 览 器 和 Firefox 浏 览 器 都 修改 了 策略 ， 使 得 再 多 的 选择 
器 的 优先 级 也 无 法 超过 上 一 级 ， 因 此 ， 目 前 越级 现象 仅 在 下 浏览 器 中 可 
见 。 


为 什么 会 有 这 种 有 趣 的 现象 呢 ? 早 些 年 查看 Firefox 浏 览 器 的 源 代 
码 ， 发 现 所 有 的 类 名 都 是 以 8 字 节 字符 串 存 储 的 ，8 字 节 所 能 容纳 的 最 大 
值 就 是 255， 因 此 同时 出 现 256 个 类 名 的 时 候 , 势必 会 越过 其 边缘 ， 湾 出 
到 ID 区 域 。 而 现在 采用 了 16 字 节 的 字符 串 存 储 ， 能 容纳 的 类 型 数量 足够 
多 了 ， 束 不 会 出 现 这 种 现象 。 














当然 ， 这 个 冷 知 识 并 没有 多 大 的 实用 价值 ， 大 致 了 解 一 下 即 可 。 


2.3 ”为 什么 按钮 :hover 变 色 了 


了 解 了 CSS 选 择 器 的 优先 级 之 后 ， 很 多 日 常 工 作 中 遇 到 的 一 些 问题 
你 就 知道 是 怎么 回 事 了 ， 举 一 个 按钮 :hover 变 色 的 例子 。 


例如 ， 我 们 写 一 个 赣 底 白字 的 按钮 ， 使 鼠标 经 过 按钮 时 会 改变 背景 
色 : 


.CS-button { 
background-color: darkblue; 


color: white; 

} 

.CS-button:hover { 
background-color: blue; 


<a href="javascript:" class="cs-button"” role="button"> 按 钮 (</a> 








看 代码 没有 任何 问题 ， 但 是 页 面 一 刷新 就 出 现 问题 了 。 和 鼠标 经 过 按 
钮 的 时 候 ， 文 字 居 然 变 成 赣 色 了 ， 而 不 是 预期 的 白色 ! 





是 哪里 出 了 问题 呢 ? 一 排查 ， 这 个 问题 居然 是 CSS reset 导 致 
的 。 


在 实际 开发 中 ， 我 们 一 定 会 对 全 局 的 链接 颜色 进行 设置 ， 例 如 ， 按 
钮 默认 颜色 为 赣 色 ， 鼠 标 经 过 的 时 候 变 成 深交 





a { color: blue; } 
a:hover { color: darkblue; } 





按钮 变色 就 是 这 里 的 a:hover 导 致 的 。 因 为 a:hover 的 优先 级 
比 .cs-button 的 优先 级 高 〈:hover 伪 类 的 优先 级 和 类 选择 器 的 优先 级 
一 样 ) ， 所 以 鼠标 经 过 按钮 的 时 候 按 钮 颜色 表现 为 a:hover 设 置 的 深蓝 
色 。 


知道 原因 ， 问 题 就 好 解决 了 了， 第 见 做 法 是 再 设置 一 遍 鼠 标 经 过 按钮 
的 颜色 : 


.CS-button:hover { 
color: white; 


background-color: blue; 





或 者 按钮 改 用 语义 更 好 的 button 标 签 ， 而 不 是 传统 的 a 标 签 。 


第 3 草 ” ”CSS 选择 器 的 命名 





CSS 选 择 需 的 命名 问题 是 最 向 困 扰 开 发 者 的 事情 之 一 。 究 竟 是 面 问 
CSS 属 性 命名 ， 还 是 面 癌 HIML 语 义 命名 ? 是 使 用 长 命名 ， 还 是 使 用 短 
命名 ? 这 些 疑 问 在 本 章 都 能 找到 答案 ， 并 且 我 还 会 把 一 些 多 年 摸索 出 来 
的 最 佳 实践 分 享 给 读者 。 


在 此 之 前 ， 我 们 不 妨 先 了 解 一 些 关 于 CSS 选 择 器 的 基础 特性 。 





3.1 ”CSS 选择 嚣 是否 区 分 大 小 写 


CSS 选 择 器 有 些 区 分 大 小 写 ， 有 些 不 区 分 大 小 写 ， 还 有 些 可 以 设置 
为 不 区 分 。 


要 搞 清 楚 CSS 选 择 喜 是 否 区 分 大 小 写 的 问题 ， 还 要 从 HTML 说 起 。 
在 HIML 中 ， 标 答 和 属性 都 是 不 区 分 大 小 写 的 ， 而 属性 值 是 区 分 大 小 写 
的 。 于 是 ， 相 对 应 地 ， 在 CSS$ 中 ， 标 签 选择 器 不 区 分 大 小 写 ， 属 性 选择 
器 中 的 属性 也 不 区 分 大 小 写 ， 而 类 选择 右 和 ID 选择 项 本 质 上 是 属性 值 ， 
因此 要 区 分 大 小 写 。 





下 面 我 们 通过 一 个 例子 来 一 探究 竟 。HITML 如 下 : 





<p class="content"> 颜 色 是 ? </py> 





CSS 如 下 : 


P { padding: 16pxj background-color: black; } 


[CLASS] { color: white; } 
.CONTENT { text-decoration: line-through; } 











HTML 字 符 全 部 都 是 小 写 ，3 种 类 型 的 CSS 选 择 嚣 均 使 用 大 写 ， 结 
如 图 3-1 所 示 ， 黑 底 白 字 无 贯穿 线 ， 这 说 明 选 择 器 P 和 选择 器 [CLASS] 后 
效 ， 而 .CONTENT 无 效 。 





图 3-1 ”CONTENT 类 名 没有 匹配 ， 导 致 贯穿 线 没 有 生效 








选择 器 对 大 小 写 敏感 情况 的 总 结 见 表 3-1。 





一 一 


表 3-1 选择 器 对 大 小 写 的 敏感 情 





学 














是 否 对 大 小 写 敏感 

















[attr=val] 台 习 


ID 选择 器 #container {} 敏感 








| | 


然而 ， 随 着 各 大 浏 贤 费 支持 属性 选择 器 中 的 属性 值 也 不 区 分 大 小 写 
在] 前 面 加 一 个 ) ， 已 经 没有 严格 意义 上 的 对 大 小 写 敏感 的 选择 需 
了 ， 因 为 类 选择 器 和 ID 选择 器 本 质 上 也 是 属性 选择 器 ， 因 此 ， 如 果 和 希望 
HTML 中 的 类 名 对 大 小 写 不 敏感 ， 可 以 这 样 : 








[class~="val" i] {} 


例如 : 


且 


<p class="content"> 颜 色 是 ? </py> 








CSS 如 下 : 


P { padding: 16pxj background-color: black; } 
[CLASS] { color: white; } 
[CLASS~=CONTENT i] { text-decoration: line-through; } 





结果 如 图 3-2 所 示 ， 黑 底 日 字 员 穿线， 说 明 上 面 3 个 选择 器 均 对 大 小 
写 不 敏感 。 





图 3-2 ”CONTENT 类 名 作为 属性 值 可 以 匹配 ， 使 贯穿 生效 











更 多 关于 属性 选择 器 大 小 写 敏感 的 内 容 参 见 第 6 章 。 


3.2 CSS 选择 器 命名 的 合法 性 


这 里 主要 讲 一 下 类 选择 器 和 ID 选择 器 的 命名 合法 性 问题 ， 旨 在 纠正 
大 家 长 久 以 来 的 错误 认识 。 什 么 错误 认识 呢 ? 最 常见 的 就 是 类 名 选择 器 
和 ID 选择 器 不 能 以 数字 开头 ， 如 下 : 





.1-foo { border: 16px dashed; padding: 16pxj } /* 无 效 */ 


对 ， 上 面 这 种 写法 确实 无 效 ， 但 这 并 不 是 因为 不 能 以 数字 开头 ， 而 
古 不 能 直接 写 数字 ， 需 要 将 其 转 义 一 下 ， 如 下 : 


.\31 -foo { border: 16px dashed; padding: 16px; } 


此 时 ， 下 面 的 HTML 就 表现 为 黑 底 白字 : 





<span class="1-foo"> 颜 色 是 ? </spany> 


效果 如 图 3-3 所 示 ， 所 有 浏览 器 下 均 有 虚线 边框 。 


图 3-3 ”以 数字 开 尖 的 类 选择 器 生效 了 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/3/2-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 











为 什么 会 有 这 么 奇怪 的 表示 ?居然 表示 成 \31， 而 且 后 面 还 有 一 
空格 ! 





其 实 \31 外 加 空格 是 CSS 中 字符 1 的 十 六 进 制 转 码 表示 。 其 中 31 就 是 
字符 1 的 Unicode 值 ， 如 下 : 








console.log('1'.charCodeAt().tostring(16)); // 结果 是 31 


字符 0 的 Unicode 值 是 30， 字 符 9 的 Unicode 值 是 39，0 一 9 这 10 个 数字 
对 应 的 Unicode 值 正好 是 30 一 39。 


我 们 也 可 以 用 以 下 这 种 方法 进行 表示 : 


.\9606631-foo { border: 16px dashed; padding: 16px; } 
31 前 面 用 4 个 0 进行 补 全 ， 这 样 \31 后 面 就 不 用 加 空格 。 


类 名 或 者 ID 其 全 可 以 是 纯 数 字 ， 例 如 下 面 的 代码 CSS 也 能 泻 染 : 





<span class="1"><em> 请 问 : </em> 颜 色 是 ?</span> 








.\31 { border: 16px dashed; padding: 16px; } 


如 末 选 择 器 中 有 父子 关系 ， 则 需要 打 两 个 空格 : 


.\31 em { margin-right: 16px; } 


然而 ，CSS 压 缩 工具 会 乱 压 空格 ， 所 以 ， 实 际 开 发 时 ， 如 果 想 使 用 
数字 ， 建 议 使 用 非 空格 完整 表示 法 : 


规范 与 更 多 字符 的 合法 性 





顺 痢 上 面 这 个 “不 能 以 数字 开头 ”的 案例 ， 我 们 可 以 讲 更 多 关于 选择 
虱 命 名 合法 性 的 内 容 。 


首先 ， 关 于 命名 ， 看 看 规范 是 怎么 说 的 ， 如 图 3-4 所 示 。 






上 az AZ _ or nonr-aSCII | 


/i az AZ 0-9 _ 一 or nonmrASCIL A 






图 3-4 规范 中 对 选择 器 命名 的 描述 





图 3-4 明 显 分 左右 两 半 ， 其 中 左边 是 选择 器 首 字符 ， 右 边 是 选择 器 
后 面 的 字符 。 从 图 中 可 以 清晰 地 看 到 ， 首 字符 支持 的 字符 类 型 是 a 一 Z 
A~Z、 下 划 线 (_) 以 及 非 ASCII 字 符 ( 中 文 、 全 和 角 字 符 等 ) ， 后 面 的 
字符 支持 的 字符 类 型 是 a~z、A~Z、0~9、 下 划 线 (_) 、 短 横 线 
(-) 以 及 非 ASCII 字 符 ， 后 面 的 字符 支持 的 字符 类 型 多 了 数字 和 短 横 
线 。 


很 多 人 对 选择 器 的 合法 性 认识 束 集 留 在 上 面 的 内 容 ， 而 忽略 了 图 3- 


4 下 面 的 “escape" 方 块 。 也 就 是 说 ， 对 于 其 他 没有 出 现 的 字符 ， 只 要 对 它 
们 执行 转 义 重新 编码 一 下 也 能 使 其 成 为 支持 的 字符 类 型 。 

也 就 是 说 ， 选 择 器 不 仅 可 以 以 数字 开头 ， 也 文 持 以 其 他 字符 开头 。 
这 些 字 符 可 以 是 下 面 的 这 些 。 

(1) 不 合法 的 ASCII 字 符 ， 
| 
以 及 ~。 


严格 来 讲 ， 上 述 字 符 也 应 该 完全 转 码 。 例 如 ， 加 号 《+)〉 的 Unicode 
值 是 2b， 因 此 选择 器 需要 写成 \2b 空格 ， 或 者 \88882b。 


但 是 ， 对 于 上 述 字符 ， 还 有 一 种 更 优雅 的 表示 方式 ， 那 就 是 直接 使 
用 斜 杠 转 义 。 示 意 如 下 ; 
[veotcolorral | 
其 他 字符 也 可 以 这 样 ; 


.\-foo { color: 
.\|foo { color: 
.\,foo { color: 


.\'foo { color: 
.\:foo { color: 
.\*foo { color: 





包括 正在 内 的 浏览 器 都 支 持 上 面 的 斜 杠 转 义 写法 ， 因 此 可 以 放心 使 
用 。 唯 一 需要 多 提 一 句 的 就 是 冒号 〈:) ， 在 IE7 浏 览 右 下 ， 直 接 使 用 \: 





征 不 被 文 持 的 ， 如 果 你 的 项 目 需要 兼容 这 些 浏览 喜 ， 可 以 使 用 \3a 加 上 
空格 代 答 。 


(2) 中 文字 符 。 下 面 的 CSS 也 是 有 效 的 : 
(3) 中 文 标点 符号 ， 例 如 : 
(4) emoji 表 情 : 


.© { color: red; } 


由 于 emoji 字 符 在 手机 设备 或 者 OS X 系 统 上 自动 显示 为 emoji 表 傅 ， 
因此 有 人 会 在 实验 性 质 的 项 目 中 使 用 emoji 字 符 作为 类 名 ， 这 样 ， 展 示 
源 代 码 的 时 候 ， 会 有 一 个 一 个 的 表情 出 现 ， 这 也 挺 有 意思 的 。 








至 于 其 他 转 义 字符 ， 没 有 任何 在 实际 项 目 中 使 用 它们 的 理由 。 但 我 
个 人 觉得 中 文 命 名 可 以 一 试 ， 毕 竟 它 的 可 读 性 更 好 ， 命 名 也 更 轻松 ， 不 
再 要 去 找 翻译 。 








到 此 就 结束 了 吗 ? 还 没有 。 











不 知道 大 家 有 没有 注意 到 图 3-4 中 还 有 两 个 小 圆 框 ， 其 中 一 个 里 面 
征 一 根 短 横 线 〈-) ， 还 有 一 个 里 面 是 连续 两 根 短 横 线 〈--) ， 它 们 是 什 


么 意思 呢 ? 


意思 和 是， 我们 可 以 直接 以 短 横 线 开头 ， 如 果 是 一 根 短 模 线 〈-) ， 
那么 短 模 线 后 面 必须 有 其 他 字符 、 字 母 或 下 划 线 或 者 其 他 编码 字符 ， 如 
果 是 连续 两 根 短 横 线 〈(--) ， 则 它 的 后 面 不 跟 任何 字符 也 是 合法 的 。 因 
此 ， 下 面 两 个 CSS 语 句 都 是 合法 的 ， 都 可 以 泻 染 : 


.-- { color: red; } /* 有 效 */ 








.-a-b- { color: red; } /* 有 效 */ 





对 于 一 些 需要 特殊 标记 的 元 素 ， 可 以 试 试 以 短 横 线 开头 命名 ， 它 一 
定 会 令 人 印象 深刻 。 


3.3 CSS 选择 器 的 命名 是 一 个 哲学 问题 











如 果 你 正在 参与 的 是 一 个 独 目 开发 、 页 面 简单 且 上 线 几 天 就 寿 终 正 
究 的 小 项 目 ， 则 你 可 以 完全 放飞 目 我 ，CSS 选 择 器 可 以 随便 命名 ， 中 
文 、emoji 字 符 、 各 种 高 级 选择 器 都 可 以 用 起 来 。 但 是 ， 如 果 你 正在 开 
发 多 人 协作 ， 需 要 不 断 达 代 、 不 断 维护 的 项 目 ， 则 一 定 要 谨慎 设计 ， 考 
虑 周全 ， 以 职业 的 态度 面 对 命名 这 件 事情 。 








目 然 ， 开 发 人 员 并 不 傻 ， 也 知道 对 于 有 些 项 目 ， 要 尽心 尽力 ， 他 们 
会 及 挥 出 自己 的 题 峰 实 力 ， 项 目 上 线 后 也 上 自我 感觉 民 好 。 但 那些 自我 感 
觉 恨 好 的 开发 人 员 写 的 CSS 代 码 实际 上 往往 质量 堪忧 ， 但 开 太 人 员 却 压 
根 没 音 识 到 这 个 问题 ， 最 典型 的 就 是 CSS 命 名 的 设计 很 糟 粽 ， 他 们 早已 
经 埋 下 巨大 的 隐患 却 浑 然 不 知 。 











这 样 的 现象 太 多 了 ， 真 的 太 多 了 。 正 因为 如 此 ， 我 觉得 有 必要 好 好 


和 大 家 聊 聊 CSS 选 择 器 命名 的 问题 ， 先 把 选择 器 的 CSS 代 码 质量 给 提升 
Rs 


3.3.1 长 命名 还 是 短命 名 


对 于 使 用 长 命名 还 是 短命 名 的 问题 ， 我 的 回答 是 请 使 用 短命 名 。 例 
如 ， 一 段 介 绍 ， 类 名 可 以 这 样 : 


.Some-intro { line-height: 1.75; } 
而 没有 必要 这 样 : 
.Some-introduction { line-height: 1.75; } 


后 一 种 方式 不 仅 增加 了 书写 时 间 ， 也 增加 了 CSS 文 件 的 大 小 。 虽 然 

这 样 做 使 语义 更 加 准确 了 ， 也 确实 有 一 定价 值 ， 但 价值 很 有 限 。 要 知 

道 ， 日 后 维护 代码 时 ， 人 们 只 会 关心 这 个 类 名 有 没有 在 其 他 地 方 使 用 

过 ? 改变 、 删 除 这 个 类 名 会 不 会 出 现 问题 ? 至 于 语义 ， 人 们 真 的 不 关 
bs 








渡 


~ 


CSS 选 择 器 的 语义 和 HTML 的 语义 是 不 一 样 的 ， 前 者 只 是 为 了 方便 
人 的 识别 ， 它 对 于 机 器 而 言 没 有 任何 区 别 ， 因 此 价值 很 弱 ; 但 是 HTML 
的 语义 的 重要 作用 是 让 机 器 识别 ， 如 搜索 引擎 或 者 屏幕 阅读 器 等 ， 它 是 
与 用 户 体 验 与 产品 价值 密切 相关 的 。 











因此 ， 请 使 用 短命 名 ， 足 矣 ! 一 旦 习惯 ， 或 者 约定 俗 成 ， 完 全 不 影 
响 阅 读 ， 就 好 比 <p> 标 签 是 paragraph 的 简写 ， 语 义 表示 段落 一 样 。 


3.3.2 蛙 命 名 还 是 组 音 命 名 


单 命名 的 优点 是 字符 少 、 书 写 快 ， 缺点 是 容易 出 现 命 名 冲突 的 问 
题 ; 组 合 命名 的 优 点 是 不 容易 出 现 命名 神 突 ， 但 写 起 来 较 和 烦琐 。 样 陈冲 
突 的 性 质 比 书写 速度 慢 严 重 得 多 ， 因 此 ， 理 论 上 推荐 使 用 组 合 命名 ， 但 
在 实际 开发 中 ， 项 目 奶 求 的 往往 是 效益 最 大 化 ， 而 不 是 完美 的 艺术 品 。 
因此 ， 有 基体 该 如 何 取舍 ， 不 能 一 概 而 论 ， 只 能 从 经 验 层面 进行 曾 述 。 




















(1) 对 于 多 人 人 合作、 长 期 维护 的 项 目 ， 千 万 不 要 出 现下 面 这 些 以 
常见 单词 命名 的 单 命 名 选择 占 ， 因 为 后 期 非常 容易 出 现 命名 冲突 的 问 
题 ， 即 使 你 的 项 目 不 会 引入 第 三 方 的 CSS: 

.title {} /* 不 建议 */ 
.text {} /* 不 建议 */ 
.box {} /* 不 建议 */ 

这 几 个 命名 是 出 现 频 紊 最 高 的 ， 一 定 要 使 用 男 外 的 前 级 组 合 将 它们 

保护 起 来 ， 这 个 前 级 可 以 是 模块 名 称 ， 或 者 场景 名 称 ， 例 如 : 





.dialog-title {} 
.ajax-error-text {} 
.Upload-box {} 


(2) 如 果 你 的 项 目 会 使 用 第 三 方 的 UI 组 件 ， 就 算是 全 站 公用 的 


CSS， 也 不 要 出 现下 面 这 样 的 单 合 名， 因为 说 不 定 下 面 的 命名 就 会 与 第 
三 方 CSS 发 生 冲 突 : 








.header {} /* 不 建议 */ 
.main {} /* 不 建议 */ 
.aside {} /* 不 建议 */ 








.warning {} /* 不 建议 */ 
.success {} /* 不 建议 */ 


.red {} /* 不 建议 */ 
.green {} /* 不 建议 */ 











正确 的 做 法 是 加 一 个 统一 的 前 级 ， 使 用 组 合 命 名 的 方式 。 你 可 以 随 
意 命 名 这 个 前 缀 ， 可 以 是 项 目 代 号 的 英文 缩写 ， 也 可 以 是 产品 名 称 的 拼 
划 首 字母 ， 因 为 这 个 前 绥 的 作用 是 避免 冲突 ， 它 并 不 需要 任何 语义 。 但 
本 要 注意 的 是 前 级 最 好 不 要 超过 4 个 字母 ， 因 为 字母 多 了 完全 没有 任何 
意义 ， 只 会 徒 增 CSS 文 件 的 大 小 。 例 如 , “CSS 选 择 圳 ”的 英文 是 CSS 
Selector， 我 就 可 以 取 CSS 的 首 字 母 C 和 Selector 的 痛 字 母 5 作 为 本 书 所 有 
选择 器 的 前 级 类 名 ， 于 是 有 : 





汪 


mk 





名 强 


.Cs-header {} 
.Cs-main {} 


.Cs-aside {} 





如 果 你 认真 观察 所 有 的 开源 UI 框架 ， 会 发 现 其 CSS 样 式 一 定 都 有 一 
个 一 致 的 前 级 ， 因 为 这 样 做 会 避免 发 生 冲 突 ， 我们 自己 开发 项 目的 时 候 
也 要 秉承 这 个 理念 。 





(3) 如 果 你 的 项 目 百 分 百 是 自主 研发 的 ， 以 后 维护 此 项 目的 人 也 
不 会 盗 取 别人 的 CSS 来 充 数 ， 则 与 网 站 公用 结构 、 颜 色相 关 的 这 些 CSS 
可 以 使 用 单 命名 ， 例 如 : 











.dark { color: #4c5161; } 


.red { color: #f4615c; } 
.gray { color: #a2a9b6; } 





但 对 于 非 公用 内 容 ， 如 标题 〈.title) 、 盒 子 〈.box) 等 就 不 能 使 用 
单 合 名， 因为 颜色 这 类 样式 是 贯穿 于 整个 项 目的 ， 具 有 高 度 的 一 致 性 ， 
而 标题 〈.tite) 会 在 很 多 地 方 出 现 ， 且 样式 各 不 相同 ， 如 大 标题 、 小 标 
题 、 弹 框 标题 、 模 块 标题 等 ， 容 易 产生 命名 冲突 。 





对 于 网 站 UI 组 件 ， 各 个 业务 模块 一 定 要 采用 多 名 称 的 组 合 命名 方 
式 ， 且 最 好 都 有 一 个 统一 的 命名 前 级 。 


Ae me 例 
如 ， 只 是 一 些 运营 活动 ， 请 务必 添加 统一 的 项 目前 缀 ， 这 都 是 过 来 人 的 
忠告 ， 因 为 这 次 活动 的 某 些 功能 和 效果 日 后 会 被 复 用 ， 有 了 统一 的 前 
缀 ， 日 后 直接 复制 代码 惑 能 使 用 ， 没 有 后 顾 之 忱 ， 大 家 都 开心 ， 例 如 : 





.CS-title {} 
.CS-text {} 
.CS-box {} 





但 有 一 类 基于 CSS 属 性 构建 的 单 命名 反而 更 安全 ， 它 们 比 闫 色 这 些 
类 名 还 要 安全 ， 即 使 项 目 会 引入 外 部 CSS: 


.db { display: block; } 
.tc { text-align: center; } 


.ml126 { margin-left: 26px; } 
.vt { vertical-align: top; } 





这 种 方式 的 命名 更 安全 的 原因 在 哪里 呢 ? 


(1) 这 些 选 择 器 命名 是 面向 CSS 属 性 的 ， 它 们 是 超越 具体 项 目的 
存在 ， 只 会 被 重复 定义 ， 但 不 会 发 生 样式 冲突 。 


(2) 面 问 CSS 属性 的 命名 是 机 械 的 、 反 直 党 的 ， 而 面 癌 语义 的 命 
名 符合 人 类 直觉 ， 也 就 是 说 ， 对 于 一 个 标题 ， 将 它 命名 为 title 的 人 很 
多 ， 但 抛弃 语义 ， 直 接 使 用 tc 命名 的 人 却 室 室 无几 。 更 直 日 一 点 ， 从 网 
上 随机 找 两 个 CSS 文 件 ， 其 中 title 命 名 冲突 的 概率 要 比 tc 大 好 几 个 数 
量 级 。 











这 确实 有 些 奇 怪 ， 如 此 短 的 命名 反而 不 会 产生 冲突 ， 这 是 我 这 10 年 
来 写 过 无 数 CSS 所 得 出 的 结论 。 当 然 ， 我 们 最 好 还 是 尽 可 能 降低 冲突 出 
现 的 概率 ， 这 样 心里 也 踏实 : 








.g-db { display: block; } 
.g-tc { text-align: center; } 


.8g-ml20 { margin-left: 26px; } 
.g-vt { vertical-align: top; } 





或 者 连 前 级 也 直接 省 挥 : 


.-db { display: block; } 
.-tc { text-align: center; } 


.-ml20 { margin-left: 26px; } 
.-Vvt { vertical-align: top; } 








这 样 ， 一 眼 就 能 辨识 这 个 类 名 是 基于 CSS 属 性 创建 的 。 


忆 结 一 下 ， 除 了 多 人 合作 、 长 期 维护 、 不 会 引入 第 三 方 CSS 的 项 目 
的 全 站 公用 样式 可 以 使 用 单 命名 ， 其 他 场景 都 需要 组 合 命名 。 


然而 ， 即 使 将 命名 做 到 极致 ， 也 无 法 完全 避免 冲突 ， 因 为 CSS 
reset 的 冲突 是 防不胜防 的 。 例 如 ， ee 和 
网 站 都 不 一 样 ， 很 多 第 三 方 CSS 甚 至 喜欢 使 用 通 


*::before，#::after { box-sizing: border-box; } 








后 面 2 个 伪 元 素 前 面 的 星 写 是 多 余 的 ， 这 不 重要 ， 重 要 的 是 这 段 
CSS 会 给 其 他 网 站 布局 市 来 毁灭 性 的 影响 ， 导 致 大 量 错位 和 矿 才 变化 ， 
因为 所 有 元 素 默认 的 盒 模型 都 被 改变 了 。 和 希望 大 家 在 实际 开 及 中 不 会 过 
到 这 样 不 靠 谱 的 第 三 方 ， 也 不 要 成 为 这 么 不 靠 谱 的 第 三 方 。 


3.3.3 面 问 属性 的 命名 和 面 问 语义 的 命名 


面 回 属性 的 命名 指 选择 堪 的 命名 是 跟着 有 具体 的 CSS 样 式 走 的 ， 与 项 
目 、 页 面 、 模 块 统统 没有 关系 。 人 例如， 比较 经 典 的 清除 浮动 类 
名 .clearfix: 





.Clearfix:after { content: ''; display: table; clear: both; } 


以 及 其 他 很 多 命名 : 


display: none; } 
display: block; } 
display: flex; } 
display: grid; } 
float: left; } 

float: right; } 
text-align: left; } 
text-align: right; } 
text-align: center; } 
text-align: justify; } 





面 辐 语义 的 命名 则 是 根据 应 用 元 素 所 处 的 上 下 文 来 命名 的 。 例 如 : 





.header { background-color: #333; color: #fff; } 
.logo { font-size: 6; color: transparent; } 


. 
上 述 两 种 命名 方式 各 有 优 缺 点 。 


面向 属性 的 命名 的 优点 在 于 CSS 的 重用 率 高 ， 性 能 最 佳 ， 即 插 即 
用 ， 方 便 快 捷 ， 开 发 也 极为 迅速 ， 因 为 它 省 去 了 大 量 在 HIML 和 CSS 文 
件 之 间 切 换 的 时 间 ; 不 足 在 于 由 于 属性 单一 ， 其 适用 场景 有 限 ， 男 外 因 
为 使 用 方便 ， 易 被 过 上 度 使 用 ， 从 而 带 来 更 高 的 维护 成 本 。 














面 问 语义 的 命名 的 优点 是 应 用 场景 广泛 ， 可 以 实现 非常 精致 的 布局 
效果 ， 扩 展 方便 ， 不 足 在 于 代码 吵 唆 ， 开 发 效率 一 般 ， 因 为 所 有 HTML 
都 需要 命名 ， 哪 但 是 一 个 10 像 素 的 间距 。 这 就 导致 很 多 开 及 者 要 么 选择 
直接 使 用 标签 选择 顺 ， 要 么 束 选 择 一 个 简单 的 类 名 ， 然 后 通过 父子 关系 
限定 样式 ， 结 末 带 来 了 更 糟 糙 的 维护 问题 。 





.CS-foo > div { margin-top: 16px; } 


.CS-foo .bar { text-align: center; } 





两 种 选择 器 命名 的 优 缺 点 对 比 见 表 3-2。 


表 3-2 ”两 种 选择 器 命名 的 优 缺 点 对 比 





缺点 











面向 属性 的 命名 重用 性 高 ， 方 便 ; 适用 场景 有 限 





面 癌 语义 的 命名 灵活 丰富 ， 应 用 场景 广泛 E， 











针对 这 两 种 命名 ， 究 竟 该 如 何 取舍 ? 我 的 观点 是 : 如 果 是 小 项 目 ， 
则 直接 采用 面 癌 语义 的 命名 方式 ， 如 果 是 多 人 合作 的 大 项 目 ， 则 两 种 方 
式 都 采用 ， 因 为 项 目 越 大 ， 面 向 属性 的 命名 的 价值 越 能 得 到 体现 。 这 一 
扩 会 在 下 一 节 深 入 探讨 。 


3.3.4 ”我 是 如 何 取 名 的 


给 选择 器 命名 就 和 中 午 吃 什 么 一 样 是 一 个 难题 。 命 名 不 能 太 长 (如 
末 类 名 可 以 压缩 则 例外 ) ， 要 包 全 语义 ， 还 要 应 付 许多 开发 场景 ， 有 时 
候 确 实感 党 脑 细胞 不 够 用 。 








这 么 多 年 的 0 了 一 套 目 己 的 命名 习惯 ， 我 使 用 翻 
译 软件 的 场景 也 越 来 越 少 了 ， 这 里 分 享 一 下 目 己 的 一 些 命名 习惯 ， 和 希望 
可 以 帮 到 大 家 。 





1. 不 要 使 用 拼音 





下 面 这 样 的 命名 就 不 要 出 现 了 : 





.Cs-tou {} /* 不 建议 */ 





.cs-hezi {} /* 不 建议 */ 





使 用 拼音 虽然 省 力 ， 对 功能 也 没有 影响 ， 但 却 是 一 个 比较 傻 的 行 
为 ， 因 为 它 会 让 人 觉得 你 比较 业余 。 你 自己 命名 是 省 力 了 ， 但 这 样 的 命 
名 对 其 他 同事 而 言 却 苦 不 堪 言 ， 因 为 可 读 性 太 差 ， 不 符合 通常 的 命名 习 
惯 ， 会 导致 其 他 同事 一 下 子 反 应 不 过 来 ， 例 如 ，.cs-hezi 远 不 如 .cs- 





box 一 目 了 然 ， 另 外， 同一 个 中 文 拼音 往往 可 以 对 应 多 个 不 同文 字 ， 难 
以 识别 。 


对 于 多 人 合作 的 项 目 ， 一 定 要 注意 克己 ， 特 立 独 行 并 不 是 用 在 这 种 
场合 中 的 。 


但 万 事 无 绝对 ， 如 果 一 些 中 文 类 的 专属 名 词 和 产品 没有 对 应 的 英文 
名 称 ， 那 么 可 以 使 用 拼音 ， 如 weibo、youku 等 。 


2. 从 HTML 标 签 中 寻找 灵 





HTML 标 签 本 身 就 是 非常 好 的 语义 化 的 短命 名 ， 且 其 数量 众多 ， 我 
们 大 可 直接 借鉴 。 例 如 由 1: 


.CS-module-header {} 
.CS-module-body {} 
.CS-module-aside {} 
.CS-module-main {} 
.CS-module-nav {} 
.CS-module-section {} 


.CS-module-content {} 
.Cs-module-summary {} 
.CS-module-detail {} 
.CS-module-option {} 
.CS-module-img {} 

.CS-module-footer {} 





上 面 的 header 到 footer 全 部 都 是 原生 HTML 标 签 ， 直 接 使 用 它 
们 。 这 些 命名 可 以 与 HTML 标 签 不 一 一 对 应 ， 例 如 : 


<p class="cs-module-detail"> 详 细 内 容 ..….</p> 





虽然 命名 中 的 关键 字 用 的 是 detail， 但 我 们 可 以 不 使 用 <detail> 





元 素 而 使 用 <p> 元 素 ， 甚 至 使 用 <div> 元 素 也 可 以 。 类 名 选择 器 和 标签 
选择 器 不 同 ， 其 可 以 无 视 标 签 ， 直达 语义 本 里， 更 加 录 活 ， 因 此 ， 我 们 
可 以 进一步 放 开 思维 。 例 如， 对 于 列表 ， 就 算 不 是 用 的 <1i> 标 签 ， 我 们 
也 可 以 在 命名 的 时 候 使 用 1i， 例 如 一 个 下 拉 琳 单 。 为 了 更 简洁 的 HTML 
代码 ， 同 时 兼顾 键盘 等 设备 的 无 障碍 访问 ， 可 以 采用 下 面 的 HTML 结 
构 : 





<div class="cs-module-UulLl”role="]1istbox”"> 
href class="cs-module-1i" role="option"> 菜 单 内 容 1</ay> 
href class="cs-module-1i" role="option"> 菜 单 内 容 2</ay> 


























href class="cs-module-1i" role="option"> 菜 单 内 容 3</ay> 
href class="cs-module-1i" role="option"> 菜 单 内 容 4</ay> 
href class="cs-module-1i" role="option"> 菜 单 内 容 5</ay> 
































对 于 列表 想必 很 多 人 会 使 用 1ist， 对 于 链接 ， 很 多 人 会 使 
用 1ink， 它 们 都 是 很 好 的 命名 ， 不 过 下 次 大 家 不 妨 直 接 尝 试 使 用 1i 和 
a， 说 不 定 你 会 喜欢 上 这 种 更 加 精 悍 的 基于 HTML 语义 的 命名 : 





.cs-module-1i {} /* 列表 */ 





.cs-module-a {} /* 链接 */ 








我 还 会 从 其 他 XML 语 言 中 寻找 命名 灵感 ， 例 如 SVG， 对 于 “组 ”， 我 
会 直接 使 用 g， 而 不 是 group， 这 就 是 因为 我 借鉴 了 SVG 中 的 <g> 元 素 ; 
对 于 “描述 ”， 我 会 直接 使 用 desc， 而 不 是 description， 这 也 是 因为 我 
音 鉴 了 SVG 中 的 <desc> 元 素 。 


.cs-module-g {} /* 组 */ 
.cs-module-desc {} /* 描述 */ 




















最 后 提供 一 点 “ 私 货 ”， 供 大 家 参考 。 对 于 一 些 大 的 容器 盒子 或 者 组 





件 盒子 ， 我 现在 已 经 不 使 用 box 这 个 词 了 ， 而 直接 用 一 个 字母 x 代 答 ， 也 
束 是 : 


.Cs-module-x {} /* module 容 器 盒子 */ 





这 样 做 的 原因 有 3 个 。 








(1) 多 年 的 实践 让 我 友 现 ， 所 有 这 些 常 用 的 单词 里 面 禹 有 字母 x 的 
也 束 box 这 一 个 单词 ， 和 直接 使 用 x 代 珍 整个 单词 不 会 及 生 冲 突 ， 也 容易 记 
忆 。 





(2) box 是 一 个 超 高 频 出 现 的 命名 单词 ， 使 用 一 个 字母 x 代替 单词 
box 可 以 节约 代码 量 。 例 如 ， 在 某 微 博 个 人 主页 的 CSS 中 搜索 box， 结 
多 达 471 个 匹配 ， 我 们 大 致 计算 一 下 ， 每 一 个 box 字 符 蔡 换 成 x 字符 可 以 
节约 2 字 节 ， 单 这 个 CSS 文 件 就 可 以 节约 942 字 节 ， 将 近 1KB， 而 一 个 
CSS 类 名 必然 会 在 HTML 代码 中 至 少 使 用 一 次 ， 也 就 意味 着 至 少 可 以 节 
约 2KB。 


(3) 字母 x 的 结构 上 下 左右 均 对 称 ， 每 次 写 完 ， 心 里 面 都 会 非常 等 
畅 ， 你 会 对 这 个 字母 上 闻 。 











3. 从 HIML 特 定 属性 值 中 寻找 灵感 


表单 元 系 多 使 用 type 属 性 进行 区 分 ， 于 是 这 类 控件 会 直接 采用 标准 
的 type 属 性 值 进行 命名 。 例 如 : 


.CSs-radio {} 
.CS-Checkbox {} 


.Cs-range {} 


其 他 一 些 属性 值 也 可 以 用 在 对 应 内 容 的 呈现 上 。 例 如 ， 下 面 这 些 都 
古 非 常 好 的 命名 : 





.Cs-tspan-email {} 
.CS-tspan-number {} 
.CSs-tspan-color {} 
.CS-tspan-tel {} 


.CS-tspan-date {} 
.CS-tspan-url {} 
.CS-tspan-time {} 
.CS-tspan-file {} 





无 障碍 访问 相关 的 role 属 性 也 有 很 多 语义 化 的 属性 值 可 供 我 们 使 
用 。 例 如 ， 下 面 这 些 都 是 非常 好 的 命名 ， 可 以 牢记 在 心 : 








.CS-grid {} 
.Cs-grid-cell {} 
.Cs-log {} 
.CS-menu {} 
.Cs-menu-bar {} 
.Cs-menu-item {} 
.Cs-region {} 


.CS-row {} 
.Cs-slider {} 
.CS-tab {} 
.CSs-tab-list {} 
.CS-tab-panel {} 
.CS-tooltip {} 
.Cs-tree {} 





4. 从 CSS 伪 类 和 HTML 布 尔 属性 中 寻找 灵感 


我 们 还 可 以 借鉴 CSS 伪 类 以 及 部 分 HTML 布 尔 属 性 的 命名 作为 状态 
管理 类 名 ， 例 如 : 


激活 状态 状态 管理 类 名 .active 源 自 伪 类 :active:; 

禁用 状态 状态 管理 类 名 .disabled 源 自 伪 类 :disabled 或 HTML 
disabled 属 性 ; 

列表 选中 状态 状态 管理 类 名 .selected 源 自 HTML selected 属 
性 ; 

选中 状态 状态 管理 类 名 .checked 源 自 伪 类 :checked 或 HTML 
checked 属 性 ; 

出 错 状态 状态 管理 类 名 .invalid 源 自 伪 类 :invalid。 





激活 状态 和 选中 状态 本 质 上 是 类 似 的， 其 中 ， 对 于 .checked 
和 .selected， 我 只 会 在 模拟 对 应 表单 控件 的 场景 下 使 用 它们 ， 其 余 情 
况 下 都 是 使 用 .active 人 代替， 基本 上 ，80% 的 状态 类 名 都 是 .active 类 
es 





.disabled 用 来 表示 案例 或 元 素 的 禁用 状态 ， 比 较 常用 。 





.invalid 只 会 用 在 表单 校 验 出 错时 使 元 素 高 亮 显示 ， 不 算 常用 。 


可 以 看 到 这 里 的 状态 类 名 都 是 单 命名 ， 如 何 使 用 它们 有 所 讲究 ， 具 
体 可 以 参见 3.4.4 节 。 


3.4 ”CSS 选择 器 设计 的 最 佳 实践 


将 CSS 选 择 器 的 命名 了 解 通 透 ， 可 以 让 你 的 CSS 开 发 效率 以 及 代码 
质量 提升 一 个 量 级 。 


3.4.1 不 要 使 用 ID 选 择 器 





没有 任何 理由 在 实际 项 目 中 使 用 ID 选择 需 。 


里 然 ID 选 择 强 的 性 能 很 不 错 ， 可 以 和 类 选择 器 分 姓 抗 礼 ， 但 是 由 于 
它 存 在 下 面 两 个 巨大 缺陷 ， 这 个 本 就 不 太 重 要 的 优点 更 加 不 值 一 提 。 





(1) 优先 级 太 高 。ID 选 择 器 的 优先 级 实在 是 太 高 了 ， 如 果 我 们 想 
重 置 某 些 样式 ， 必 然 还 需要 ID 选择 器 进行 覆盖 ， 再 多 的 类 名 都 没有 用 ， 
这 会 使 得 整个 项 目 选择 器 的 优先 级 变 得 非常 混乱 。 如 果 非 要 使 用 元 素 的 
ID 作为 选择 器 标识 ， 请 使 用 属性 选择 器 ， 如 [id="csId"]。 


(2) 和 JavaScript 和 耦合 。 实 际 开 发 时 ， 元 素 的 ID 主要 用 在 JavaScript 
中 ， 以 方便 DOM 元 素 快 速 获取 它 。 如 果 ID 同 时 和 样式 关联 ， 它 的 可 维 
护 性 会 大 打折 扣 。 一 旦 ID 变 化 ， 必 须 同时 修改 CSS 和 JavaScript， 然 而 实 
际 上 开发 人 员 只 会 修改 一 处 ， 这 就 是 很 多 后 期 bug 产 生 的 原因 。 





3.4.2 不 要 藤 僚 选择 融 


我 见 过 太 多 类 似 下 面 的 CSS 选 择 关 了: 


.nav a {} 
.box > div {} 
.avatar img {} 


还 有 这 样 的 : 


.box .pic .icon {} 
.Upbox .input .upbtn {} 


在 使 供 套 更 加 方便 的 Sass、Less 之 类 的 预 编 译 工 具 出 现 后 ，5 层 、6 
层 骨 套 的 选择 器 也 大 量 出 现 ， 这 太 糟 料 了 ! 它们 都 是 特别 差 的 代码 ， 其 
性 质 比 JavaScript 中 满 屏 的 全 局 变量 还 要 粳 。 


这 种 不 动脑 子 偷懒 的 写法 除了 让 你 在 写 HTML 代 码 的 时 候 省 点 儿 
力 ， 其 他 全 是 缺点 ， 包 括 : 


泻 染 性 能 糟糕 ; 
优先 级 混乱 ; 
样式 布局 脆弱 。 


1. 洽 染 性 能 糟糕 








有 两 方面 会 对 渲染 性 能 造成 影响 ， 一 是 标签 选择 句 ， 二 是 过 深 的 衣 


CSS 选 择 器 的 性 能 排序 如 下 : 


ID 选择 器 ， 如 #foo; 

类 选择 器 ， 如 .foo; 
标签 选择 器 ， 如 div; 
通 配 选 择 器 ， 如 #; 
属性 选择 器 ， 如 [href]; 


部 分 伪 类 ， 如 :checked。 


其 中 ，ID 选 择 器 的 性 能 最 好 ， 类 选择 器 处 于 同一 个 级 别 ， 差 寞 很 
小 ， 比 标签 选择 器 具有 更 加 明显 的 性 能 优势 。 这 么 看 似乎 .box>div 也 
古 一 个 不 错 的 用 法 ，.box 性 能 很 高 ， 选 中 后 再 匹配 标签 为 div 的 子 元 


素 ， 性 能 还 行 吧 。 然 而 ， 很 遗憾 ，CSS 选 择 器 是 从 右 往 左 进行 匹配 泻 染 
的 ，.box>div 是 先 匹 配 页 面 所 有 的 <div> 元 素 ， 再 匹配 .box 类 名 元 
素 。 如 果 页 面 内 容 丰 富 、HTML 结 构 比 较 复 杂 ，<div> 元 素 多 达 上 王 
个 ， 同 时 这 样 低 效 的 选择 器 又 很 多 ， 则 会 珊 来 明显 可 感知 的 演 染 性 能 问 








过 深 的 藤 套 会 对 性 能 产生 影 啊 束 更 好 理解 了 了 ， 因 为 每 加 深 一 层 衣 
套 ， 浏 览 器 在 进行 选择 器 匹配 的 时 候 会 多 一 层 计算 。 一 两 个 鬼 僚 对 性 能 
自然 毫 无 影响 ， 但 是 ， 如 果 数 千 行 CSS 都 采用 了 这 种 多 层 侍 套 ， 量 变 会 
引起 质变 ， 此 时 ， 光 CSS 样 式 的 解析 惑 可 以 到 达 百 训 秒 级 别 。 








然而 在 大 多 数 场 景 下 ， 讨 论 CSS 选 择 器 的 性 能 问题 是 一 个 伪 命 题 。 
首先 ， 我 们 实际 开发 的 大 多 数 页 面部 比较 简单 ， 选 择 器 用 得 再 不 合理 ， 
性 能 兰 异 也 不 会 太 大 ;其 次 ， 束 算 页 面 很 复杂 ，300 坚 秒 和 30 坚 秒 的 性 
能 兰 民 也 不 会 成 为 页 面 性 能 的 瓶 陆 ， 你 付出 千 万 分 的 努力 所 带 来 的 优化 
说 不 定 还 远 不 如 优化 一 张 广 告 图 的 尺寸 来 得 大 。 





因此 ， 演 染 性 能 糟 料 确 实 是 一 个 缺 操 ， 但 这 只 是 相对 而 言 的 ， 并 不 
古 严 重 的 问题 。 大 家 可 以 把 注意 力 放 在 下 面 两 个 缺点 上 ， 它 们 才 是 关键 
缺陷 。 


2. 优先 级 混乱 


选择 器 优先 级 有 一 个 原则 ， 那 融 是 尽 可 能 保持 较 低 的 优先 级 ， 这 样 
方便 以 较 低 的 成 本 重 置 一 些 样 式 。 


然而 ， 一 旦 选择 器 开始 嵌 套 ， 优 先 级 规则 就 会 变 得 复杂 ， 当 我 们 想 
要 重 置 某 些 样式 的 时 候 ， 你 会 发 现 一 个 类 名 不 管用 ， 两 个 类 名 也 不 管 
用 ， 打 开 控 制 台 一 看 ， 你 希望 重 置 的 样式 居然 有 6 个 选择 器 依次 般 套 。 
例如 ， 我 从 某 知名 网 站 首页 找 的 这 段 CSS: 








.Layer_send video v3 .video upbox dd .dd succ .pic default img {} 


此 时 ， 如 果 想 要 重 置 img 的 样式 ， 只 有 这 几 种 方法 : 一 是 使 用 同一 
优先 级 的 选择 器 ， 但 这 个 选择 器 的 位 置 在 需要 重 置 的 CSS 代 码 的 后 面 ; 
二 是 使 用 更 深 的 层级 ， 例 如 ， 使 用 7 层 选 择 器 ， 这 是 最 音 用 的 方法 ; 

是 要 么 使 用 备 受 诉 病 的 卫 选 择 器 ， 要 么 使 用 具有 “大 杀伤 
性 ”的 !1important。 但 它们 都 是 很 糟糕 的 解决 方法 。 











我 相信 ， 只 要 稍微 有 点 CSS 开 发 经 验 的 人 ， 一 定 遇 到 过 这 类 优先 级 
履 阁 无效 的 问题 ， 很 多 人 都 习 以 为 钊 ， 认 为 这 类 问题 很 难 避 免 ， 但 总 有 
解决 之 道 。 实 际 上 ， 只 要 你 彻 确 放 茎 这 种 暴 套 写法 ， 确 实 可 以 完全 避免 


书 。 
3. 样式 布局 脆弱 


还 是 这 段 反 例 CSS: 


.layer_ send _ video v3 .video upbox dd .dd succ .pic default img {} 





这 段 CSS 中 出 现 了 2 个 标签 选择 器 dd 和 img， 在 实际 开发 维护 的 过 程 
中 ， 调 整 HTML 标 签 是 非常 常见 的 事情 ， 例 如 ， 将 <dd> 元 素 换 成 语义 更 
好 的 <section>。 但 是 ， 如 果 使 用 的 是 dd 和 ;img 选择 器 ，HTML 标 签 是 


不 能 换 的 ， 因 为 如 果 标签 换 了 ， 整 个 样式 都 会 无 效 ， 你 必须 去 CSS 文 件 
中 找到 对 应 的 标签 选择 器 进行 同步 修改 ， 维 护 成 本 巨大 。 











另外 ， 过 多 选择 器 层级 已 经 完全 限定 死 了 HTML 结构， 导致 日 后 想 
通过 HTML 调 整 层级 或 者 位 置 非常 困难 ， 因 为 你 一 动 就 发 现 样 式 挂 掉 
了 ， 样 式 布 局 非常 脆弱 ， 非 常 难以 维护 ， 会 带 来 巨大 的 人 力 成 本 和 样式 
布局 风险 。 











4. 正确 的 选择 器 用 法 
正确 的 选择 器 用 法 是 全 部 使 用 无 肉 套 的 纯 类 名 选择 器 。 


例如 ， 不 要 再 使 用 下 面 的 HIML 和 CSS 代 码 了 : 


<nav class="naVv"> 
<a href> 链 接 1</a> 
<a href> 链 接 2</a> 
<a href> 链 接 3</a> 


<nav class="cs-nav"> 
<a href class="cs-nav-a"> 链 接 1</ay> 
<a href class="cs-nav-a"> 链 接 2</ay> 
<a href class="cs-nav-a"> 链 接 3</ay> 

</nav> 

.CS-nav {} 

.CS-nav-a {} 








不 要 再 使 用 下 面 的 HTML 和 CSS 代 码 了 : 


<div class="box"> 
<figure class="pic"> 
<img src="./example.png” alt=" 示 例 图 片 "> 
<figcaption><i class="icon"></i> 图 片 标题 </figcaption> 
</figure> 
</div> 
.box {} 
.box .pic {} 
.box .pic .icon {} 








请 换 成 : 


<div class="cs-box"> 
<figure class="cs-box-pic"> 
<img src="./example.png"”alt=" 示 例 图 片 "> 
<figcaption><i class="cs-box-pic-icon"></i> 图 片 标题 </figcaption> 
</figure> 
</div> 
.CS-box {} 
.CS-box-pic {} 
.CS-box-pic-icon {} 











还 有 不 要 再 出 现下 面 这 样 的 语句 了 : 


.layer_ send video v3 .video upbox dd .dd succ .pic default img { display: 





block; } 


直接 写成 下 面 这 个 就 好 了 : 


基本 布局 就 使 用 没有 仍 套 、 没 有 级 联 的 类 选择 器 就 可 以 了 。 这 样 的 
选择 器 代码 少 、 性 能 高 、 扩 展 性 强 、 维 护 成 本 低 ， 没 有 任何 不 使 用 的 理 
由 ! 











只 有 当 我 们 需要 更 遍 的 优先 级 重 置 菏 些 样式 ， 或 者 没有 操作 HTML 





元 素 权限 的 时 候 〈 如 动态 富 文 本 ) 才 需 要 借助 其 他 选择 器 、 各 类 选择 符 
以 及 五 花 八 门 的 伪 类 设置 CSS 样 式 。 


然而 ， 我 也 知道 ， 给 每 个 HTML 标 签 都 命名 很 耗费 脑 细胞 ， 每 个 
HTML 标 签 都 要 写 class， 还 要 在 HTML 文 件 和 CSS 文 件 之 间 来 回 切换 ， 
十 分 耗费 开发 时 间 。 人 天 生 是 懒惰 的 ， 加 上 项 目 时 间 紧 ， 偷 懒 使 用 现成 
的 HTML 标 签 作为 选择 器 也 无 可 厚 非 。 但 实际 上 这 些 问题 是 有 解决 方法 
的 ， 那 就 是 面向 属性 的 命名 ， 它 可 以 用 于 解决 这 “最 后 一 干 米 ” 的 效率 问 


匮 。 





3.4.3 ”不 要 监视 面 癌 属性 的 命名 








不 少 开发 者 是 不 认可 下 面 这 种 基于 CSS 属 性 本 里 的 命名 方式 的 ， 尤 
其 是 Web 标 准 刚 兴起 的 那 段 时 期 : 


.dn { display: 
.db { display: 


.dib { display: 


.ml126 { margin 


.Vt { vertical 
.vm { vertical 
.Vb { vertical 


none; } 
block; } 
inline-block; } 


-left: 26px; } 


-align: top; } 
-align: middle; } 
-align: vb;} 


.text-ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden 


; } 





.abs-clip { position: absolute; clip: rect(06 06 60 606); } 


为 什么 呢 ? 因为 这 类 命名 本 质 上 和 在 HTML 元 素 上 写 style 属 性 没 
有 什么 区 别 ， 例 如 : 


<Span class="dib m126"> 文 字 </spany> 


的 性 质 和 


<span style="display:inline-block; margin-left: 26px;"> 文 字 </span> 





古 一 样 的 。 只 是 前 者 在 书写 上 更 为 简洁 ， 优 先 级 更 低 。 


然后 有 意思 的 事情 来 了 ， 当 我 们 需要 调整 样式 的 时 候 ， 改 动 的 是 
HIML， 而 非 CSS， 这 不 等 于 HTML 和 CSS 耦 合 在 一 起 了 吗 ? 于 是 很 多 
人 就 接受 不 了 ， 无 其 在 推 拧 内 容 和 样式 分 离 的 年 代 。 我 们 做 技术 ， 一 定 
要 保持 理性 ， 要 有 上 自己 的 思考 ， 干 万 不 要 被 迷惑 ， 最 合适 的 才 是 最 好 
的 。 技 术 的 发 展 也 像 流行 趋势 一 样 是 一 个 圈 ， 转 了 一 图 又 回来 了 了 。 随 着 
React 等 框架 的 兴起 , “CSS in JavaScript” 的 概念 居然 也 出 现 了 ，CSS 居 然 
和 JavaScript 也 耘 合 了 ， 这 要 是 放 在 10 年 前 ， 简 直 不 可 思议 ! 














所 以 面 癌 属性 的 命名 用 法 本 身 没 有 任何 问题 ， 关 键 看 你 怎么 用 ， 以 
及 在 什么 地 方 用 。 


我 习惯 将 一 个 网 站 的 页 面 归 纳 为 下 面 几 块 : 公用 结构 、 公 用 模块 、 
UI 组 件 、 精 致 布局 和 一 些 细 术 末节 。 其 中 公用 结构 、 公 用 模块 、UI 组 
件 、 精 致 布局 都 不 适合 使 用 面 问 属性 的 类 名 ， 前 3 个 属于 页 面 公 用 内 
容 ， 如 果 使 用 了 面向 属性 的 类 名 ， 日 后 维护 起 来 会 很 不 方便 ， 因 为 这 些 
内 容 散 布 在 项 目的 各 个 角落 ， 一 旦 需要 修改 ， 则 需要 找到 所 有 散布 的 
HTML 代 码 ， 显 然 维 护 成 本 很 蜗 。 精 致 布局 也 不 适合 使 用 面向 属性 的 类 
名 ， 因 为 面 品 属性 的 类 名 属性 单一 ， 无 法 完全 驾驭 精致 的 样式 布局 ， 还 
需要 额外 的 语义 化 的 类 名 ， 既 然 需 要 新 的 类 名 ， 也 束 没 有 使 用 面 铝 属性 





类 名 的 必要 。 


而 一 些 细 枝 术 市 和 特殊 场景 的 微调 则 非常 适合 这 种 面 加 属性 的 命 
名 。 这 种 命名 能 规避 缺点 ， 发 挥 优点 。 例 如 还 是 这 段 CSS: 


.layer_ send video v3 .video upbox dd .dd succ .pic default img { display: 





block; } 


在 茶 个 很 深 的 角落 里 有 一 张 图 片 ， 我 们 希望 这 张 图 片 的 display 表 
现 为 block， 这 样 底 部 束 不 会 有 空 日 间 际 。 这 是 一 个 完全 不 会 在 其 他 地 
方 重用 的 CSS， 整 算 你 专门 给 它 命名 一 个 语义 化 的 CSS， 类 似 这 样 : 


.Pic default img { display: block; } 


也 没有 任何 价值 。 类 名 的 意义 就 在 于 重复 利用 ， 如 果 它 只 是 一 次 性 
的 产物 ， 真 不 如 直接 写 style 内 联 样式 ， 因 为 至 少 DOM 元 素 的 父子 关系 
不 会 被 CSS 后 代 选 择 器 限制 住 。CSS 开 发 者 似乎 也 意识 到 了 这 个 问题 ， 
为 了 一 个 完全 不 会 在 其 他 地 方 使 用 的 样式 ， 绞 尺 脑 汁 想 一 个 不 会 产生 冲 
突 的 名 称 完 全 是 一 件 收益 为 负 的 事情 ， 于 古 束 直接 使 用 了 标签 选择 器 ， 
少 了 一 次 命名 和 一 次 在 HTML 文 件 和 CSS 文 件 之 间 的 切换 ， 心 理 收益 平 
衡 了 。 


.dd _ succ .pic default img { display: block; } 


但 是 这 种 懒惰 降低 了 代码 质量 ， 增 加 了 维护 的 成 本 。 实 际 上 ， 这 个 
问题 是 有 非常 好 的 解决 之 道 的 ， 那 吏 是 面 问 属性 的 类 名 。 














我 们 无 须 专门 为 一 个 完全 不 会 重复 使 用 的 样式 命名 ， 也 不 需要 在 


HTMEL 文 件 、CSS 文 件 之 间 来 回 切换 ， 也 不 会 有 性 能 、 优 先 级 以 及 维护 
性 等 方面 的 问题 ， 你 只 需要 在 书写 <img> 元 素 的 时 候 顺 便 加 上 一 个 名 
为 "db ' 的 类 名 就 好 了 。 





<figure class="pic default"> 


<img src="1.png" class="db"> 
</figure> 





日 后 就 算 你 变更 父 元 素 类 名 ， 将 <img> 元 素 换 成 其 他 元 素 ， 也 不 用 
担心 样式 问题 。 


<figure class="cs-pic-default"> 


<svg class="db"></svg> 
</figure> 





实际 开发 中 ， 面 同属 性 的 类 名 的 应 用 场景 有 很 多 ， 比 方 说 设置 两 个 
按钮 之 间 的 间距 、 某 段 文 字 的 字号 、 文 字 超 出 宽度 后 以 … 显示 以 及 一 些 
特殊 场景 的 微调 ， 甚 至 包括 给 公用 的 UI 组 件 或 模块 快速 打 补 丁 。 举 个 大 
家 都 可 能 遇 到 过 的 例子 ， 我 们 在 写 按钮 组 件 的 时 候 喜 欢 设置 vertical- 
align:middle， 这 样 它 和 文字 并 排 显 示 的 时 候 也 会 垂直 居中 : 

















.CS-button { 
display: inline-block 


vertical-align: middle; 











这 种 用 法 一 直 用 得 好 好 的 ， 突 然 在 某 个 页 面 这 个 按钮 要 和 
<textarea> 元 素 一 行 显示 ， 由 于 <textarea> 元 素 的 高 度 比 按钮 高 很 
多 ， 因 此 顶 对 齐 效果 才 好 看 ， 按 钮 设置 中 的 vertical-align:middle 


显然 不 合适 ， 需 要 将 它 修改 成 vertical-align:top， 人 怎么 办 ? 





这 时 多 半 会 借助 祖先 类 名 重 置 一 下 ， 类 似 于 : 


.CS-XXXX .cs-button { 
vertical-align: top; 


} 





其 实 有 更 轻 、 更 快 、 更 好 、 更 省 的 做 法 ， 只 需要 在 写 HTML 时 候 顺 
手 加 一 下 vt 就 可 以 了 : 


这 个 例子 也 体现 了 “不 要 髓 套 选 择 占 ”的 好 处 一 一 非常 便于 样式 重 置 
与 维护 。 由 于 类 名 没有 骨 套 ， 因 此 同样 没有 多 套 的 vt 能 够 正确 重 置 .cs- 
button 中 设置 的 vertical-align:middle 声明 ， 从 而 实现 我 们 需要 的 效果 。 





3.4.4 正确 使 用 状态 类 名 





页 面 区 互 总 是 伴随 着 各 种 状态 变化 ， 包 括 茶 用 状态 、 选 中 状态 、 油 
活 状 态 等 。 大 多 数 前 痢 人 员 在 实现 这 些 交 互 效 果 的 时 候 是 没有 什么 规范 
或 者 准则 的 。 例 如 ， 一 个 第 见 的 点 击 “ 更 多 ”从 而 显示 全 部 文字 内 容 的 交 
互 : 














<div id="content" class="cs-content"> 

文字 内 容 ... 

<a href="javascript:" id="more" class="cs-content-more"> 更 多 </a> 
</div> 
.CS-Content { 

height: 66pX; 

line-height: 28px; 

overflow: hidden; 





} 


默认 只 显示 3 行文 字 ， 点 击 “ 更 多 ” 才 会 显示 全 部 的 文字 内 容 。 根 据 
我 的 观察 ， 多 使 用 下 面 这 两 种 方法 来 实现 。 


(1) 用 JavaScript 一 步 搞定 : 


more.onclick = function () { 


content.style.height = 'auto'; 
}; 





(2) 用 CSS 类 名 控制 ; 


.height-auto { 
height: auto; 
} 


此 时 JavaScript 代 码 为 : 


more.onclick = function () { 


content.className += ' height-auto'; 


}; 





其 实 从 产品 角度 讲 ， 上 面 两 种 方式 都 无 伤 大 雅 ， 都 是 不 错 的 实现 ， 
但 是 从 代码 层面 讲 ， 它 们 均 有 不 足 之 处 。 


(1) JavaScript 直 接 控制 样式 的 不 足 。 由 于 我 们 的 网 页 样式 是 由 
CSS 控 制 的 ， 一 旦 JavaScript 也 参与 样式 控制 ，CSS 和 JavaScript 就 存在 交 
又 关系 ， 这 样 就 增加 了 潜在 的 维护 成 本 。 需 求 一 变 ， 需 要 同时 修改 CSS 
和 JavaScript， 考 虑 到 很 多 公司 写 CSS 的 和 写 JavaScript 的 不 是 同一 个 人 ， 
这 就 导致 样式 变化 要 动用 两 个 人 力 参 与 维护 ， 从 而 增加 了 人 力 成 本 和 开 
发 周期 。 








(2) 命名 语义 过 于 随意 的 问题 。 类 名 样式 保持 语义 本 无 可 厚 非 ， 
但 是 对 于 使 用 JavaScript 实 现 的 交互 效果 而 言 ， 语 义 化 反而 是 问题 所 在 。 
例如 我 们 一 看 .height-auto 就 知道 其 背后 的 样式 与 高 度 auto 有 关 ， 但 
是 由 于 类 名 的 添加 是 在 JavaScript 中 完成 的 ， 因 此 本 质 上 下 面 这 两 种 实现 
没有 任何 区 别 : 
more.onclick = function () { 


content .style.height = 'auto'; 
}; 


2 
more.onclick = function () { 
content.className += ' height-auto'; 


}; 





例如 ， 设 计 师 突然 希望 这 里 的 展开 不 要 这 么 生硬 ， 要 有 动画 效果 ， 
虽然 说 从 技术 的 角度 来 讲 ， 我 们 只 需要 修改 CSS 代 码 就 可 以 了 ， 但 是 ， 
对 于 这 个 .height-auto 命 名 就 有 些 一 言 难 斥 了。 设想 一 下 ， 如 果 我 们 
把 里 面 的 样式 改 成 了 CSS3 动 画 的 相关 内 容 ， 是 不 是 就 牛头 不 对 马 嘴 
了 ? 是 不 是 要 去 JavaScript 中 把 这 个 类 名 改 成 .height-animate 之 类 
的 。 看 ， 最 后 还 是 改 了 两 处 地 方 。 

















另外 ， 还 有 一 个 看 上 去 不 是 问题 的 问题 ， 那 驶 是 ， 一 个 页 面 往往 会 
有 很 多 的 交互 效果 ， 如 果 每 个 交互 效果 都 有 一 个 对 应 的 类 名 来 进行 控 
制 ， 那 岂 不 是 JavaScript 文 件 中 有 很 多 控制 样式 的 类 名 ， 代 码 的 可 维护 性 
就 变 差 了 。 





最 佳 实践 方法 就 是 使 用 .active、.checked 等 这 种 状态 类 名 进行 
交互 控制 。 


more.onclick = function () { 


content.className += ' active'; 


}; 





而 且 是 项 目 中 所 有 的 页 面 交 互 都 使 用 这 个 状态 类 名 进行 交互 控制 ， 
没 错 ， 是 所 有 ! 


但 这 样 做 难道 不 会 造成 样式 冲突 吗 ? 不 会 ， 大 家 只 要 遵循 下 面 这 条 
准则 即 可 : .active 状 态 类 名 目 身 绝对 不 能 有 CSS 样 式 ! 








再 重复 一 届 ，.active 类 名 目 身 无 样式 ， 就 是 一 个 状态 标识 符 ， 用 
来 与 其 他 类 名 发 生 关 系 ， 让 其 他 类 名 的 样式 发 生变 化 。 这 种 关系 可 以 是 
父子 、 兄 弟 或 者 上 自身。 还 是 看 看 点 击 “ 更 多 ”展开 全 部 文字 这 个 例子 : 





.CS-Content { 
height: 66pX; 
line-height: 28px; 
overflow: hidden; 


} 


.Cs-content.active { 
height: auto; 

} 

.active > .cs-content-more { 
display: none; 


} 





JavaScript 代 码 如 下 : 


more.onclick = function () { 


content.className += ' active'; 


}; 





可 以 看 到 ， 高 度 变 化 是 由 .cs-content.active 级 联 类 名 触发 
的 ，“ 更 多 ”按钮 隐藏 是 由 .active>.cs-content-more 父 子 关 系 触发 
的 。 .active 类 名 本 身 没有 任何 样式 ， 就 是 一 个 状态 标识 符 ， 虽 








然 .active 类 名 出 现在 了 JavaScript 中 ， 但 是 由 于 其 本 映 无 样式 ， 因 此 是 
真正 意义 上 的 样式 和 行为 分 离 ! 


例如 ， 设 计 师 突然 希望 展开 的 过 程 以 动画 形式 呈现 ， 直 接 修改 CSS 
即 可 ，JavaScript 不 需要 任何 改动 ， 因 为 JavaScript 中 没有 包含 任何 样 
式 : 





.CS-Content { 
max-height: 66px; 
line-height: 28px; 
transition: max-height .5s; 
overflow: hidden; 


.Cs-content.active { 
max-height: 266pX; 

} 

.active > .cs-content-more { 
display: none; 


} 











很 显然 ， 基 于 状态 类 名 实现 交互 控制 可 以 有 效 降低 日 后 的 维护 成 
本 ， 除 此 之 外 ， 还 有 其 他 很 多 优点 。 


(1) 不 再 为 命名 烦恼 。 开 发 者 不 再 花 精 力 和 时 间 想 合适 的 命名 ， 
因此 提高 了 开发 效率 。 


(2) 可 读 性 更 强 了 。CSS 和 JavaScript 代 码 的 可 读 性 更 强 了 ， 一旦 
在 CSS 或 JavaScript 中 看 到 ' .active'， 大 家 都 知道 页 面 的 这 块 内 容 包含 
交互 效果 。 





(3) JavaScript 代 人 码 量 更 少 了 。 例 如 ， 我 们 在 全 局 或 者 顶层 局 部 定 
义 了 这 么 一 个 变量 : 


var ACTIVE = 'active'; 


由 于 我 们 所 有 的 交互 都 只 用 这 一 个 类 名 ， 因 此 JavaScript 代 码 的 压缩 
率 更 高 ， 也 更 好 维护 。 





(4) 类 名 压缩 成 为 可 能 。 我 从 未 在 国内 见 到 HTML 类 名 是 有 压 纵 
的 ， 类 名 压缩 最 大 的 阻碍 就 是 我 们 在 实现 交互 效果 的 时 候 把 带 有 CSS 样 
式 的 类 名 混在 JavaScript 文 件 中 ， 并 且 命 名 随意 ， 还 会 把 类 名 字符 串 进行 
分 隔 处 理 ， 尤 其 是 一 些 网 上 的 UI 组 件 ， 类 似 : 


var classNameRoot = 'swipe-slide-'; 


然后 ， 通 过 这 个 类 名 前 经， 拼接 其 他 类 名 ， 你 说 ， 这 该 如 何 准 确 压 








但 是 ， 如 宋 大 家 正确 使 用 状态 类 名 ， 我 们 就 可 以 通过 简单 配置 不 参 
与 压缩 的 类 名 来 实现 我 们 的 类 名 压缩 效果 。 例 如 ， 在 config.js 中 : 


"compressClassName": true, 


"ignoreClassName": ["active", "disabled", "checked", "selected", "open" 








具体 实现 非 本 书 重 点 ， 这 里 不 展开 讲述 。 需 要 注意 的 是 ， 类 名 压缩 
需要 CSS 规 范 约束 ， 同 时 需要 有 展 好 的 CSS 编 码 习惯 才 行 ， 多 人 合作 的 
项 目 不 太 实际 ， 你 无 法 保证 别人 和 你 一 样 专业 。 








建议 状态 类 名 的 命名 也 尽 可 能 和 原生 控件 的 标准 HTML 属 性 一 致 ， 
这 样 代码 更 易 读 ， 也 显得 你 更 专业 。 例 如 对 于 自 定义 单 复 选 框 的 选中 状 


态 ， 建 议 使 用 . checked， 对 于 自 定义 下 拉 列 表 的 选中 状态 ， 建 议 使 
用 .selected， 对 于 自 定义 弹 杠 ， 建 议 使 用 .open。 其 余 全 部 可 以 采 
用 .active。 当 然 ， 这 只 是 我 的 个 人 习惯 ， 我 见 过 有 人 使 用 .on 作为 状 
态 类 名 ， 这 也 是 可 以 的 。 


3.4.5 ”最 佳 实践 汇总 

最 后 ， 有 必要 对 CSS 选 择 器 设计 的 最 佳 实 践 做 一 个 补充 和 总 结 。 
1. 命名 书写 

(1) 命名 建议 使 用 小 写 ， 使 用 英文 单词 或 缩写 ， 对 于 专 有 名 词 ， 
可 以 使 用 拼音 ， 例 如 : 

不 建议 使 用 驼峰 命名 ， 驳 峰 命 名 建议 专门 给 JavaScript DOM 用 ， 以 
便 和 CSS 样 式 类 名 区 分 开 。 


(2) 对 于 组 合 命 名 ， 可 以 短 横 线 或 下 划 线 连接 ， 可 以 组 合 使 用 短 
模 线 和 下 划 线 ， 也 可 以 连续 短 横 线 或 下 划 线 连接 ， 任 何方 式 都 可 以 ， 只 
要 在 项 目 中 保持 一 致 就 可 以 : 





.CSs-logo-youku {} 
.CSs_logo youku {} 
.CSs-logo--youku {} 


.CS-1ogo_ youku {} 
组 合 个 数 没 有 必要 超过 5 个 ，5 个 是 极限 。 
(3) 设置 统一 前 级 ， 强 化 品牌 同时 避免 样式 冲突 : 


.Cs-header {} 
.CSs-logo {} 
.CSs-logo-a {} 





这 样 ，CSS 代 码 的 美观 度 也 会 提升 很 多 。 
2. 选择 需 类 型 

根据 选择 器 的 使 用 类 型 ， 我 将 网 站 CSS 分 为 3 个 部 分 ， 分 别 是 CSS 重 
置 样式 、CSS 基 础 样式 和 CSS 交 互 变 化 样式 。 


无 论 哪 种 样式 ， 都 没有 任何 理由 使 用 ID 选择 器 ， 实 在 要 用 ， 使 用 属 
性 选择 器 代替 ， 扬 的 优先 级 和 类 选择 器 一 模 一 样 。 
CSS 样 式 的 重 置 可 以 使 用 标 俭 选择 器 或 者 属性 选择 器 等 : 


[type=" radio"]， 
[type="checkbox"] { 


position: absolute; clip: rect(6 6 6 90); 





} 


所 有 的 CSS 基 础 样式 全 部 使 用 类 选择 器 ， 没 有 层级 ， 没 有 标签 。 





.cs-module .img {} /* 不 建议 */ 





.cs-module-ul > 1i {} /* 不 建议 */ 





不 要 偷懒 ， 在 HTML 的 标签 上 都 写 上 不 会 冲突 的 类 名 : 


.Cs-module-1i {} 
所 有 HTML 都 需要 重新 命名 的 问题 可 以 通过 面向 属性 命名 的 CSS 样 
式 库 得 到 解决 。 





所 有 选择 占 租 人 套 或 者 级 联 ， 所 有 的 伪 类 全 部 都 在 CSS 交 互 样式 发 生 
变化 的 时 候 使 用 。 例 如 : 


.Cs-content.active { 
height: auto; 


} 
.active > .cs-content-more { 
display: none; 





例如 : 


.CS-button:active { 
filter: hue-rotate(5deg); 


.CS-input:focus { 
border-color: var(--blue); 


} 





状态 类 名 本 身 不 包含 任何 CSS 样 式 ， 它 就 是 一 个 标识 符 。 


如 果 我 们 无 法 修改 HTML， 例 如 无 法 通过 修改 class 属 性 添加 新 的 
类 名 ， 则 级 联 、 髓 套 ， 以 及 各 种 高 级 伪 类 的 使 用 都 不 受 上 面 规 则 的 限 





再 和 目前 很 多 人 的 实现 对 比 一 下 ， 最 佳 实践 的 不 同 之 处 就 在 于 : 


@ 无 标签 ， 无 层级 ; 
。 状态 类 名 标识 符 ; 
。 面 同 属性 命名 的 CSS 样 式 库 。 


3. CSS 选 择 器 分 布 


一 图 胜 千 言 ， 我 们 先 来 看 一 下 图 3-5。 


/* 网 站 变量 */ 
:root --base-color 





图 3-5 ”CSS 选择 器 设计 最 佳 实践 示意 


图 3-5 中 的 对 号 表示 需要 使 用 与 遵循 的 ， 问 号 表示 可 以 使 用 也 可 以 
不 使 用 的 ， 禁 止 符号 表示 不 建议 使 用 的 。 大 家 可 以 根据 自己 项 目的 实际 
情况 制定 更 优 的 选择 器 设计 策略 。 





4. 极致 与 权衡 


对 极致 代码 的 奶 求 无 可 厚 非 ， 但 物 极 必 反 ， 一 味 追 求 完 美 无 瑕 的 代 
码 ， 次 不 定 会 带 来 另外 的 成 本 提升 ， 作 为 一 个 成 熟 的 职业 的 开 用 人员， 
要 学 会 适当 抛弃 代码 层面 的 自我 满足 ， 学 会 站 在 利益 的 角度 权衡 出 最 好 
的 实践 。 





说 这 句 话 的 用 意 是 ， 虽 然 理 论 上 ， 上 面 我 总 结 的 最 佳 实践 是 最 完美 
的 ， 但 并 不 是 要 求 大 家 死板 避 循 ， 大 家 可 以 根据 自己 的 经 验 评估 ， 需 要 
掌握 一 个 度 。 举 例 来 说 ， 我 布 望 条 列表 的 第 一 个 元 系 的 margin-top 为 
0， 理 论 上 最 好 的 方法 是 在 HTML 输 出 的 时 候 判 断 这 个 元 素 是 否 是 列表 
的 第 一 个 元 素 ， 然 后 加 个 专门 的 类 名 。 例 如 : 





<Uul class="cs-module-ul"> 
<1i class="cs-module-1i cs-module-1i-first"> 列 表 1</1i> 


<li class="cs-module-1i"> 人 列表 2</1i> 
<1i class="cs-module-1i"> 人 列表 3</1i> 
</ul> 





CSS 如 下 : 


.CS-module-li { margin-top: 26px; } 





.Cs-module-1li-first { margin-top: 6; } 


但 是 ， 在 实际 开发 的 时 候 ， 判 断 一 个 列表 位 置 是 需要 额外 的 逻辑 
的 ， 这 个 过 辑 往往 由 负责 页面 内 容 输出 的 开发 人 员 来 实现 ， 如 果 我 们 将 
我 们 对 于 样式 的 需求 交 给 了 开 肥 人 员 ， 不 仅 拱 燃 了 别人 ， 又 给 日 后 的 维 
护 冲 来 了 更 多 的 风险 ， 所 以 ， 在 这 种 场景 下 ， 更 好 的 实现 其 实 是 伪 类 : 


<U1L class="cs-module-ul"> 





<1Li class="cs-module-1i"> 列 表 1</1i> 

<1i class="cs-module-1i"> 列 表 2</1i> 

<1i class="cs-module-1i"> 列 表 3</1i> 
</ul> 
.CS-module-li { margin-top: 26px; } 
.Cs-module-1i:first-child { margin-top: 68; } 





如 果 无 须 兼 容 IE8， 还 可 以 像 下 面 这 样 实现 : 


.Cs-module-li:not(:first-child) { 


margin-top: 28px; 


} 





里 然 CSS 代 码 层面 的 性 能 有 所 降低 ， 优 先 级 也 被 提高 了 ， 但 这 些 影 
啊 极 小 概率 会 带 来 可 感知 的 问题 ， 相 比 肤 烦 男 外 一 个 开 友 同事 要 更 划 
算 。 


重要 的 是 要 学 会 权衡 。 





[实际 开发 不 建议 使 用 module 作为 二 级 前 缀 ， 请 使 用 具体 的 模块 名 
称 。 


入 大 


第 4 章 ”精通 CSS 选 择 符 





CSS 选 择 符 目前 有 下 面 这 几 个 : 后 代 选 择 符 空 格 ( ) 、 子 选择 符 箭 
头 〈《>) 、 相 邻 兄 弟 选择 符 加 号 (+) 、 随 后 兄弟 选择 符 弯 弯 〈~) 和 列 
选择 符 双 管道 〈|| ) 。 其 中 对 于 前 4 个 选择 符 ， 浏 览 占 支持 的 时 间 较 
早 ， 非 常 实用 ， 是 本 音 的 重点 。 最 后 的 列 选 择 符 算是 “新 贯 ”， 与 Table 等 
布局 密切 相关 ， 但 目前 浏览 器 的 兼容 性 还 不 足以 使 它 被 实际 应 用 ， 因 此 
就 简单 介绍 下 。 


4.1 后 代 选 择 和 从 空格 ( ) 
后 代 选 择 符 是 非常 常用 的 选择 符 ， 随 手 抓 一 个 线 上 的 CSS 文 件 就 可 


以 看 到 这 个 选择 得 ， 它 从 IE6 时 代 束 开始 被 支持 了。 但 即使 天 天 见 ， 也 
不 见得 真 的 很 了 解 它 。 





4.1.1 对 CSS 后 代 选 择 符 可 能 错误 的 认识 


看 这 个 例子 ，HTML 和 CSS 代 码 分 别 如 下 : 





<div class="lightblue"> 
<div class="darkblue"> 
<p>1. 颜色 是 ? </py> 
</div> 
</div> 
<div class="darkblue"> 
<div class="lightblue"> 





<p>2. 颜色 是 ?</p> 
</div> 
</div> 
.lightblue { color: lightblue; } 
.darkblue { color: darkblue; } 














请 问 文字 的 颜色 是 什么 ? 


这 个 问题 比较 简单 ， 因 为 color 具 有 继承 特性 ， 所 以 文字 的 颜色 由 
DOM 最 深 的 赋 色 元 素 决定 ， 因 此 1 和 2 的 颜色 分 别 是 深蓝 色 和 浅 蓝 色 ， 
如 图 4-1 所 示 。 





1. 颜色 是 ? 


图 4-1 ”类 选择 器 与 文字 颜色 





这 个 示例 配 有 演示 页 面 ， 读 者 可 以 手动 输入 
https:/demo.cssworld.cn/selectorv4/1-1.php 或 扫描 下 面 的 二 维 码 杀 目 体验 
与 和 学 加; 





但 是 ， 如 果 把 这 里 的 类 选择 需 换 成 后 代 选 择 符 ， 那 就 没 这 么 简单 
了 ， 很 多 人 会 搞 错 最 终 呈 现 的 文字 颜色 : 


<div class="lightblue"> 
<div class="darkblue"> 
<p>1. 颅 色 是 ? </py> 
</div> 
</div> 
<div class="darkblue"> 





<div class="lightblue"> 
<p>2. 颜色 是 ? </py> 
</div> 
</div> 
.lightblue p { color: lightblue; } 
.darkblue p { color: darkblue; } 











早 些 年 我 拿 这 道 题 作 为 面试 题 ， 全 军 履 没 ， 无 人 答对 ， 大 家 都 认为 
结果 是 深蓝 色 和 浅 蓝 色 ， 实 际 上 不 是 ， 正 确 答案 是 ，1 和 2 全 部 都 是 深蓝 
色 ， 如 图 4-2 所 示 。 








图 4-2 ”后 代 选 择 器 与 文字 颜色 


很 多 人 会 搞 错 的 原因 就 在 于 他 们 对 后 代 选 择 符 有 错误 的 认识 ， 当 包 
含 后 代 选 择 符 的 时 候 ， 整 个 选择 器 的 优先 级 与 祖先 元 素 的 DOM 层 级 没 
有 任何 关系 ， 这 时 要 看 洲 地 元 素 的 优先 级 。 在 本 例 中 ， 沙 地 元 素 就 是 最 
后 的 <p> 元 素 。 两 个 <p> 元 素 彼 此 分 离 ， 非 租 套 ， 因 此 DOM 层 级 平行 ， 
没有 先后 ;再 看 选择 器 的 优先 级 ，.1lightblue p 和 .darkblue p 是 一 
个 类 选择 器 (数值 06， 和 一 个 标签 选择 器 (数值 1) ， 选 择 器 优先 级 的 
计算 值 一 样 ， 此 时 就 要 看 它们 在 CSS 文 件 中 的 位 置 ， 遵 循 “后 来 居 上 ”的 
规则 ， 由 于 .darkblue p 更 靠 后 ， 因 此 ，<p> 都 是 投 
照 color:darkblue 进 行 颜色 泻 染 的 ， 于 是 ， 最 终 1 和 2 的 文字 颜色 全 部 





都 是 深蓝 色 。 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/4/1-2.php 或 扫描 
下 面 的 二 维 码 杀 上 自体 验 与 学 习 。 


加 


| 


加 


有 点 反 直 党 ， 大 家 可 以 多 琢磨 琢磨 、 消 化 消化 。 





四 















如 末 觉 得 已 经 理解 了 ， 可 以 看 看 下 面 这 两 段 CSS 语 句 ， 算 是 一 个 小 
测验 。 


例 1: 此 时 1 和 2 的 文字 颜色 是 什么 ? 


:not(.darkblue) p { color: lightblue; } 


.darkblue p { color: darkblue; } 





答案 : 1 和 2 的 文字 颜色 也 同样 都 是 darkblue (深蓝 色 〉。 
为 :not() 本 和 喘 的 优先 级 为 0( 详 见 第 2 章 ) ， 所 以 :not(.darkblue) p 
和 .darkblue p 的 优先 级 计算 值 是 一 样 的 ， 遵 循 “后 来 居 上 ”的 规 
则 ，.darkblue p 位 于 靠 后 的 位 置 ， 因 此 1 和 2 的 文字 颜色 都 是 深蓝 色 。 





例 2: 此 时 1 和 2 的 文字 颜色 是 什么 ? 


.lightblue.lightblue p { color: lightblue; } 


.darkblue p { color: darkblue; } 





答案 : 1 和 2 的 文字 颜色 都 是 lightblue( 浅 葛 色 ) 。 因 为 选择 
器 .lightblue.1ightblue p 的 优先 级 更 高 。 


4.1.2 ”对 JavaScript 中 后 代 选 择 从 可 能 错误 的 认 
全 


直接 看 例子 ，HTML 如 下 : 


<div id="myId"> 
<div class="lonely"> 单 身 如 我 </div> 
<div class="outer"> 





<div class="inner"> 内 外 开花 </div> 
</div> 
</div> 








下 面 使 用 JavaScript 和 后 代 选 择 需 获取 元 素 ， 请 问 下 面 两 行 语 句 的 输 


出 结果 分 别 是 : 


// 1. 长 度 是 ? 
document .querySelectorAll('#myId div div').length; 





// 2. 长 度 是 ? 
document .querySelector( '#myId ' ) .querySselectorAll('div div' ). Length ; 





很 多 人 会 认为 这 两 条 语句 返回 的 长 度 都 是 1， 实 际 上 不 是 ， 它 们 返 
回 的 长 上 度 值 分 别 是 1 和 31! 


图 4-3 是 我 在 浏览 器 控制 台 测 斌 出 来 的 结果 。 

















图 4-3 ” ”JavaScript 后 代 选 择 器 获取 的 元 素 的 长 度 


第 一 个 结果 符合 我 们 的 理解 ， 不 解释 。 为 何 下 一 个 语句 返回 的 
NodeList 的 长 度 是 3 呢 ? 


其 实 这 很 好 解释 ， 一 句 话 : CSS 选 择 器 是 独立 于 整个 页 面 的 ! 
什么 意思 呢 ? 例如 ， 你 在 页 面 一 个 很 深 的 DOM 元 素 里 面 写 上 : 


<style> 
div div { } 
</style> 


整个 网 页 ， 包 括 父 级 ， 只 要 是 满足 div div 这 种 后 代 关 系 的 元 素 ， 
全 部 都 会 被 选中 ， 对 吧 ， 这 点 大 家 都 清楚 的 。 


querySelectorAll 里 面 的 选择 器 同样 也 是 全 局 特 
性 。document.querySelector('#myId').querySelectorAll('div 
div' ) 翻 译 过 来 的 意思 就 是 ， 查 询 #myId 元 素 的 子 元 素 ， 选 择 所 有 同时 
满足 整个 页 面 下 div div 选 择 器 条 件 的 DOM 元 素 。 








此 时 我 们 再 仔细 看 看 原始 的 HTML 结构 会 发 现 ， 在 全 局 视野 下 ， 
div.lonely、div.outer、div.inner 全 部 都 满足 div div 这 个 选择 
器 条 件 ， 于 是 ， 最 终 返 回 的 长 度 为 3。 如 果 我 们 在 浏览 器 控制 台 输 出 所 


有 NodeList， 也 是 这 个 结果 : 


NodeList(3) [div.lonely, div.outer, div.inner] 


这 就 是 对 JavaScript 中 后 代 选 择 符 可 能 错误 的 认识 。 





其 实 ， 要 想 querySelectorAll 后 面 的 选择 堪 不 是 全 局 匹配 ， 也 是 有 办 
法 的 ， 可 以 使 用 :scope 伪 类 ， 其 作用 就 是 让 CSS 选 择 器 的 作用 域 局 限 在 
某 一 范围 内 。 例 如 ， 可 以 将 上 面 的 例子 改 成 下 面 这 样 : 





// 3. 长 度 是 ? 


document .querySelector('#myId').querySelectorAll(':scope div div').length; 





则 最 终 的 结果 束 是 1， 如 图 4-4 所 示 。 


BE © | top TY| |@| Fe 


图 4-4 :scope 伪 类 下 获取 的 元 素 的 长 度 


关于 :scope 伪 类 的 更 多 内 容 ， 可 以 参见 第 12 章 。 


4.2 了 于 选择 符 箭 头 《〈>) 





子 选择 符 也 是 非常 常用 、 非 常 重要 的 一 个 选择 符 ，IE7 浏 览 占 开始 
支持， 和 后 代 选 择 符 空 格 有 点 “远房 杀 威 ”的 感觉 。 





4.2.1 子 选 择 符 和 后 代 选 择 符 的 区 别 


子 选择 符 只 会 开 配 第 一 代 子 元 素 ， 而 后 代 选 择 符 会 匹配 所 有 子 元 


看 一 个 例子 ，HTML 结 构 如 下 : 


<01> 
<1i> 颜 色 是 ? </1iy> 
<1i> 颜 色 是 ? 
<U1> 
<1i> 颜 色 是 ? </1i> 








<1i> 颜 色 是 ? </1i> 
</ul> 
</1i> 
<1i> 颜 色 是 ? </1iy> 
</o]l> 








CSS 如 下 : 


ol li { 
color: darkblue; 
text-decoration: underline; 


} 

ol > li { 
color: lightblue; 
text-decoration: underline wavy; 


} 








由 于 父子 元 素 不 同 的 text-decoration 属 性 值 会 不 断 累 加 ， 因 此 
我 们 可 以 根据 下 划 线 的 类 型 准确 判断 出 不 同 选择 符 的 作用 范围 。 最 终 的 
结果 如 图 4-5 所 示 。 


只 有 波浪 线 


最 颜色 旺 ? 一 详 生 和 波浪 线 
。 颜 色 是 ? 








图 4-5 子 选 择 符 和 后 代 选 择 符 的 测试 结果 截图 


可 以 看 到 ， 外 层 所 有 文字 的 下 划 线 都 只 有 波浪 类 型 ， 而 内 层 文字 的 
下 划 线 是 实 线 和 波浪 线 的 混合 类 型 。 而 实 线 下 划 线 是 ol 1i 选 择 器 中 的 
text-decoration:underline 声 明 产 生 的 ， 波 浪 线 下 划 线 是 01>1i 选 
择 器 中 的 text-decoration:underline wavy 声 明 产 生 的 ， 这 就 说 
作用 于 当前 子 <1i> 元 素 ， 而 o1 1i 可 以 作用 于 所 有 的 后 


明 ，ol>1i 只 能 


代 <11> 元 素 。 





以 上 就 是 这 两 个 选择 符 的 差异 。 显 然后 代 选 择 符 的 匹配 范围 要 比 子 
选择 符 的 匹配 范围 更 广 ， 因 此 ， 同 样 的 选择 器 下 ， 子 选择 符 的 匹配 性 能 
要 优 于 后 代 选 择 符 。 但 这 种 性 能 优势 的 价值 有 限 ， 几 乎 没有 任何 意义 ， 
因此 不 能 作为 选择 符 技术 选 型 的 优先 条 件 。 











图 4-5 配 有 演示 页 面 ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/selector/4/2-1.php 或 扫描 下 面 的 二 维 码 杀 自 体验 


与 学 习 。 





4.2.2 ”适合 使 用 子 选择 从 的 场景 


能 不 用 子 选择 符 就 尽量 不 用 ， 虽 然 它 的 性 能 优 于 后 代 选 择 符 ， 但 与 


其 日 后 带 来 的 维护 成 本 比 ， 这 实在 不 值 一 提 。 





举 个 例子 ， 有 一 个 模块 容器 ， 类 名 是 .cs-module-x， 这 个 模块 
在 A 区 域 和 B 区 域 的 样式 有 一 些 差 异 ， 需 要 重 置 ， 我 们 通常 的 做 法 是 给 
容器 外 层 元 素 重 新 命名 一 个 类 进行 重 置 ， 如 .cs-module-reset-b， 此 
时 ， 很 多 开发 者 〈 也 没 想 太 多 ) 就 使 用 了 子 选择 符 : 


.CS-module-reset-b > .cs-module-x { 


width: fit-content; 
} 





作为 过 来 人 ， 建 议 大 家 使 用 后 代 选 择 符 代 答 : 





/* 建议 */ 
.CS-module-reset-b .cs-module-x { 
position: absolute; 





} 





因为 一 旦 使 用 了 子 选择 符 ， 元 素 的 层级 关系 就 和 ”强制 绑 定 了 ， 日 后 
需要 维护 或 者 需求 发 生变 化 的 时 候 一 旦 调整 了 层级 关系 ， 整 个 样式 就 失 
效 了 ， 这 时 还 要 对 CSS 代 码 进 行 同步 调整 ， 增 加 了 维护 成 本 。 





记 住 : 使 用 子 选择 符 的 主要 目的 是 避免 冲突 。 本 例 中 ，. cs- 
module-x 容 器 内 部 不 可 能 再 有 一 个 .cs-module-x， 因 此 使 用 后 代 选 择 
符 绝对 不 会 出 现 冲突 问题 ， 反 而 会 让 结构 变 得 更 加 灵活 ， 就 算 日 后 再 嵌 
套 一 层 标签 ， 也 不 会 影响 布局 。 





适合 使 用 子 选择 符 的 场景 通常 有 以 下 几 个 。 


(1) 状态 类 名 控制 。 例 如 使 用 .active 类 名 进行 状态 切换 ， 会 遇 





到 祖先 和 后 代 都 存在 .active 切 换 的 场景 ， 此 时 子 选择 符 是 必需 的 ， 以 
影响 后 代 元 系 ， 例 如 : 





.active > .cs-module-x { 
display: block; 


z 


(2) 标签 受 限 。 例 如 当 <1i> 标 签 重 复 藤 套 ， 同 时 我 们 无 法 修改 标 
签名 称 或 者 设置 类 名 的 时 候 〈 例 如 WordPress 中 的 第 三 方 小 工具 ) ， 就 
需要 使 用 子 选 择 符 进行 精确 控制 。 


.Widget > 1i {} 
.Widget > 1i 1i {} 





(3) 层级 位 置 与 动态 判断 。 例 如 一 个 时 间 选 择 组 件 的 HTML 通 常 
会 放 在 <body > 元素 下 ， 作 为 <cbody> 的 子 元 素 ， 以 绝对 定位 浮 层 的 形式 
呈现 。 但 有 时 候 其 需要 以 静态 布局 钥 在 页 面 的 茶 个 位 置 ， 这 时 如 果 我 们 
不 方便 修改 组 件 源码 ， 则 可 以 借助 子 选择 符 快 速 打 一 个 补丁 : 


:not(body) > .cs-date-panel-x { 


position: relative; 


} 





意 铝 束 是 当 组 件 容 器 不 是 <body> 子 元 素 的 时 候 取 消 绝对 定位 。 





子 选 择 符 就 是 把 双 丸 剑 ， 它 通过 限制 关系 使 得 结构 更 加 稳固 ， 但 同 
时 也 失去 了 弹性 和 变化 ， 震 要 审慎 使 用 。 


4.3 相 邻 兄 腊 选择 符 加 号 (+) 


相 邻 兄弟 选择 符 也 是 非常 实用 的 选择 符 ，IE7 及 以 上 版 本 的 浏览 器 
文 持 ， 它 可 以 用 于 选择 相 邻 的 兄弟 元 素 ， 但 只 能 选择 后 面 一 个 兄弟 。 我 
们 将 通过 一 个 简单 的 例子 快速 了 解 一 下 相 邻 兄弟 选择 符 ，HITML 和 CSS 
如 下 : 





<01> 
<1i>1. 颜色 是 ? </1iy> 
<1li class="cs-1i">2。. 颜色 是 ?</1iy> 
<1i>3 .颜色 是 ?</1i> 
<1i>4. 颜色 是 ? </1i> 








</ol1> 
.CS-1li + 1i{ 
color: skyblue; 


} 





结果 如 图 4-6 所 示 。 


1. 颜色 是 ? 
2. 颜色 是 ? 天 蓉 色 


4. 颜色 是 ? 





图 4-6” 相 邻 兄 弟 选 择 符 测试 结果 截图 





可 以 看 到 ，.cs-1i 后 面 一 个 <11> 的 颜色 变 成 天 蓝 色 了 ， 结 果 符 合 
我 们 的 预期 ， 因 为 .cs-1i+1li 表 示 的 就 是 选择 .cs-1i 元 素 后 面 一 个 相 
邻 且 标签 是 1i 的 元 素 。 如 果 这 里 的 选择 器 是 .cs-1i+p， 则 不 会 有 元 素 
被 选中 ， 因 为 .cs-1i 后 面 是 <1i> 元 素 ， 并 不 是 <p> 元 素 。 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/4/3-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








4.3.1 相 邻 元 朋 选 择 符 的 相关 细节 





实际 开发 时 ， 我 们 的 HITML 不 一 定 都 是 整整 齐 齐 的 标签 元 素 ， 此 
时 ， 相 邻 元 第 选 择 符 又 当 如 何 表现 呢 ? 





1. 文本 节点 与 相 邻 兄弟 选择 符 
CSS 很 简单 : 


h4 + pit{ 
color: skyblue; 


} 





然后 我 们 在 <h4> 和 <p> 元 素 之 间 插 入 一 些 文字 ， 看 看 <p> 元 素 的 磊 


色 是 否 还 是 天 蓝 色 ? 


<h4>1. 文本 节点 </h4> 
中 间 有 字符 间隔 ， 颜 色 是 ? 








<p> 如 果 其 颜色 为 天 监 ， 则 说 明 相 邻 兄 第 选择 符 忽 略 了 文本 节点 。</p> 








结果 如 图 4-7 所 示 ，<p> 元 素 的 颜色 依然 为 天 览 ， 这 说 明 相 邻 兄 第 选 
择 符 忽 略 了 文本 节 扩 。 


1. 文本 节点 省 
中 间 有 字符 间隔 ， 颜色 是 ? 2 


图 4-7 相 邻 兄弟 选择 符 忽略 文本 节点 效果 截图 
2. 注释 节点 与 相 邻 兄弟 选择 符 
CSS 很 简单 : 


h4+pt 
color: skyblue; 


} 





然后 我 们 在 <h4> 和 <p> 元 素 之 间 插 入 一 段 注 释 ， 看 看 <p> 元 素 的 颜 


色 是 否 还 是 天 蓝 色 ? 


<h4>2. 注释 节点 </h4> 











<1-- 中 间 有 注释 间隔 ， 颜 色 是 ? --> 
<p> 如 果 其 颜色 为 天 到 ， 则 说 明 相 邻 兄 第 选择 符 忽 略 了 注释 节点。</p> 














结果 如 图 4-8 所 示 ，<p> 元 素 的 颜色 依然 为 天 区 ， 说 明 相 邻 兄 弟 选 择 
符 忽 略 了 注释 节操。 
天 将 色 


2. 注释 节点 we 


图 4-8 ” 相 邻 兄弟 选择 符 忽略 注释 节点 效果 截图 





由 此 ， 我 们 可 以 得 到 关于 相 邻 兄弟 选择 符 的 更 多 细节 知识 ， 即 相 邻 
见 第 选择 符 会 忽略 文本 节点 和 注释 节点 ， 只 认 元 素 节 点 。 


上 述 两 个 测试 示例 均 配 有 演示 页 面 ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/selector/ 4/3-2.php 或 扫描 下 面 的 二 维 码 杀 自体 验 


与 学 习 。 


of 






a 





4.3.2 ”实现 类 似 :first-child 的 效果 


相 邻 兄弟 选择 符 可 以 用 来 实现 类 似 :first-child 的 效果 。 


例如 ， 我 们 希望 除了 第 一 个 列表 以 外 的 其 他 列表 都 有 margin-top 
属性 值 ， 首 先 想 到 就 是 :first-child 伪 类 ， 如 果 无 须 兼 容 IE8 浏 览 器 ， 
可 以 这 样 实现 : 





.CSs-li:not(:first-child) { margin-top: lem; } 
如 有 果 需 要 兼容 IE8 浏 览 医 ， 则 可 以 分 开 处 理 : 


.CS-1i { margin-top: 1lem; } 





.CS-1i:first-child { margin-top: 6; } 





下 面 介 绍 另外 一 种 方法 ， 那 就 是 借助 相 邻 兄弟 选择 符 ， 如 下 : 


.CS-]1i + .cs-li { margin-top: 1em; } 


由 于 相 邻 兄 第 选择 符 只 能 匹配 后 一 个 元 系 ， 因 此 第 一 个 元 素 束 会 沙 
空 ， 永 远 不 会 被 匹配 ， 于 是 自然而然 就 实现 了 非 首 列表 元 素 的 匹配 。 





实际 上 ， 此 方法 相 比 :first-child 的 适用 性 更 广 一 些 ， 例 如 ， 当 
容器 的 第 一 个 子 元 素 并 非 .cs-1i 的 时 候 ， 相 邻 兄 弟 选 择 符 这 个 方法 依 
然 有 效 ， 但 是 :first-child 此 时 却 无 效 了 ， 因 为 没有 任何 .cs-1i 元 素 
是 第 一 个 子 元 素 了 ， 无 法 匹配 :first-child。 用 事实 说 话 ， 有 如 下 
HTML: 





<div class="cs-g1"> 
<h4> 使 用 :first-child 实 现 </h4> 
<p class="cs-1i"> 列 表 内 容 1</py> 
<p class="cs-1i"> 列 表 内 容 2</py> 
<p class="cs-1i"> 列 表 内 容 3</p> 
</div> 





<div class="cs-g2"> 
<h4> 使 用 相 邻 兄弟 选择 符 实 现 </h4> 
<p class="cs-1i"> 列 表 内 容 1</py> 
<p class="cs-1i"> 列 表 内 容 2</py> 
<p class="cs-1i"> 列 表 内 容 3</py> 
</div> 








.CSs-g81 和 .cs-g2 中 的 .cs-1i 分 别 使 用 了 不 同 的 方法 实现 ， 如 下 : 


.CS-g1 .cs-li:not(:first-child) { 
color: skyblue; 


} 


.CS-g2 .CS-li + .cs-li { 
color: skyblue; 


} 





对 比 测试 ， 结 果 如 图 4-9 所 示 。 


使 用 :first-child 实 现 ”使 用 相 邻 兄弟 选择 符 实 现 
列表 内 容 1 


个 列 春 无 系 


多 一 
符合 预期 ， 没 可 和 色 








图 4-9 使 用 :first-child 与 相 邻 兄弟 选择 符 得 到 的 测试 结果 对 比 


可 以 明显 看 到 ， 相 邻 兄 第 选择 符 实现 的 方法 第 一 个 列表 元 素 的 颜色 
依然 是 黑色 ， 而 非 天 赣 色 ， 说 明正 确 匹 配 了 非 首 列表 元 素 ， 而 :first- 
child 的 所 有 列表 元 素 都 是 天 赣 色 ， 匹 配 失败 。 可 见 ， 相 邻 兄 第 选择 符 的 
适用 性 要 更 | 一 些 ， 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/4/3-3.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








4.3.3 ”众多 高 级 选择 器 技术 的 核心 


相 邻 元 弟 选 择 符 最 便 核 的 应 用 还 是 配合 诸多 伪 类 低 成 本 实现 很 多 实 
用 的 交互 效果 ， 是 众多 高 级 选择 圳 技术 的 核心 。 


举 个 简单 的 例子 ， 当 我 们 聚焦 输入 框 的 时 候 ， 如 果 和 希望 后 面 的 提示 


文字 显示 ， 则 可 以 借助 相 邻 兄弟 选择 符 轻 松 实现 ， 原 理 很 简单 ， 把 提示 
文字 预先 埋 在 输入 框 的 后 面 ， 当 触发 focus 行 为 的 时 候 ， 让 提示 文字 显示 
即 可 ，HTML 和 CSS 如 下 : 





用 户 名 : <input><span class="cs-tips"> 不 超过 16 个 字符 </spany> 
.CS-tips { 

color: gray 

margin-left: 15px; 

position: absolute; 


visibility: hidden; 
} 
:focus + .cs-tips { 
visibility: visible; 


} 





无 须 任 何 JavaScript 代 人 码 参 与 ， 效 果 如 图 4-10 所 示 ， 上 图 为 失 焦 时 候 
的 效果 图 ， 下 图 为 聚焦 时 候 的 效果 图 。 


用 户 名 : 


用 户 名 : | | 不 超过 10 个 字符 











图 4-10” 失 焦 和 聚焦 时 候 的 效果 图 








读者 可 以 手动 输入 https://demo.cssworld.cn/selector/4/3-4.php 或 扫 摘 
下 面 的 三 维 码 亲自 体验 与 学 习 。 











这 里 只 是 抛砖引玉 ， 更 多 精彩 的 应 用 请 参见 第 9 章 


4.4 随后 郊 罗 选 择 符 要 杰 〈~) 


随后 兄 第 选择 答 和 相 令 兄 第 选择 符 的 兼容 性 一 怪 ， 痢 是 从 IE7 浏 览 
名 开始 支持 的 ， 可 以 放心 使 用 。 两 者 的 实用 性 和 重要 程度 也 是 类 似 的 ， 
忆 之 它们 的 关系 较 近 ， 有 扩 远 房 杀 威 的 味道 





4.4.1 ”和 相 邻 兄 第 选择 和 从 区别 





相 邻 兄 第 选择 符 只 会 匹配 它 后 面 的 第 一 个 兄 第 元 素 ， 而 随后 兄弟 选 
择 符 会 匹配 后 面 的 所 有 兄弟 元 素 。 


看 一 个 例子 ，HTML 结构 如 下 : 


<p class="cs-1i"> 列 表 内 容 1</py> 
<h4 class="cs-h" > 标题 </h4> 


<p class="cs-1i"> 列 表 内 容 2</p> 
<p class="cs-1i"> 列 表 内 容 3</p> 





CSS 如 下 : 


.CS-h ~ .cs-li { 
color: skyblue; 
text-decoration: underline; 


} 
.CS-h + .cs-li { 
text-decoration: underline wavy; 


} 





最 终 的 结果 如 图 4-11 所 示 。 


前 面 的 列 志 


列表 内 容 ] < 一 . 
没有 委 化 


标题 


图 4-11 相 邻 兄弟 选择 符 和 随后 兄弟 选择 符 测 试 结果 对 比 








可 以 看 到 .cs-h 后 面 的 所 有 .cs-1i 元 素 的 文字 的 颜色 都 变 成 了 天 蓝 
色 ， 但 是 只 有 后 面 的 第 一 个 .cs-1i 元 素 才 有 波浪 线 。 这 就 是 相 邻 兄弟 
选择 符 和 随后 兄弟 选择 符 的 区 别 ， 匹 配 一 个 和 匹配 后 面 全 部 的 元 系 。 








因此 ， 同 选择 器 条 件 下 ， 相 邻 兄 第 选择 符 的 性 能 要 比 随后 兄弟 选择 
符 高 一 些 ， 但 是 ， 在 CSS 中 ， 没 有 一 定 的 数量 级 ， 谈 论 选择 器 的 性 能 是 
没有 意义 的 ， 因 此 ， 关 于 性 能 的 权重 大 家 可 以 看 淡 一 些 。 


至 于 其 他 细 市 ， 两 者 是 类 似 的 ， 例 如 ， 随 后 兄 第 选择 符 也 会 忽略 文 
本 节点 和 注释 节 后 。 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/4/4-1.php 或 扫描 
下 面 的 三 维 码 查看 本 示例 的 测试 结果 。 





4.4.2 ”为 什么 没有 前 面 兄 第 选择 和 从 








我 们 可 以 看 到 ， 无 论 是 相 邻 兄弟 选 择 符 还 是 随后 兄弟 选择 符 ， 它 们 
都 只 能 选择 后 面 的 元 率 ， 我 第 一 次 认识 这 两 个 选择 符 的 时 候 ， 就 有 这 人 么 
一 个 疑问 : 为 什么 没有 前 面 兄弟 选择 符 ? 





后 来 我 才 明 白 ， 没 有 前 面 兄弟 选择 符 和 没有 父 元 素 选择 符 的 原因 是 
一 样 的 ， 它 们 都 受制 于 DOM 泻 染 规则 。 


浏览 器 解析 HTML 文档 是 从 前 往 后 ， 由 外 及 里 进行 的 ， 所 以 我 们 时 
常会 看 到 页 面 先 出 现 尖 部 然后 再 出 现 主体 内 容 的 情况 。 


但 是 ， 如 果 CSS 支 持 了 前 面 兄 弟 选择 符 或 者 父 元 素 选 择 符 ， 那 就 必 
须要 等 页 面 所 有 子 元 素 加 载 完 毕 才能 泻 染 HTML 文 档 。 因 为 所 谓 “ 前 面 
兄弟 选择 符 ”， 束 是 后 面 的 DOM 元 系 影 啊 前 面 的 DOM 元 素 ， 如 果 后 面 的 
元 素 还 没 被 加 载 并 处 理 ， 又 如 何 影 响 前 面 的 元 素 样式 呢 ? 如 果 CSS 真 的 
支持 这 样 的 选择 符 ， 网 页 呈现 速度 必然 会 大 大 减 慢 ， 浏 览 器 会 出 现 长 时 
间 的 白板 ， 这 会 造成 不 好 的 体验 。 











有 人 可 能 会 说 ， 依 然 强制 采取 加 载 到 哪里 就 泻 染 到 哪里 的 策略 呢 ? 
这 样 做 会 导致 更 大 的 问题 ， 因 为 会 出 现 加 载 到 后 面 的 元 素 的 时 候 ， 前 面 
的 元 素 已 经 泻 染 好 的 样式 会 突然 变 成 另外 一 个 样式 的 情况 ， 这 也 会 造成 
不 好 的 体验 ， 而 且 会 触发 强烈 的 重 排 和 重 绘 。 


实际 上 ， 现 在 规范 文档 有 一 个 伪 类 :has 可 以 实现 类 似 父 选择 器 和 前 
面 选择 器 的 效果 ， 且 这 个 伪 类 2013 年 就 被 提出 过 ， 但 是 这 么 多 年 过 去 


了 ， 依 然 没 有 任何 浏览 器 实现 相关 功能 。 在 我 看 来 ， 束 算 再 过 5 到 10 
年 ，CSS 文 持 “ 前 面 兄 第 选择 符 ” 或 者 “ 父 选择 符 ” 的 可 能 性 也 很 低 ， 这 倒 
不 是 技术 层面 上 实现 的 可 能 性 较 低 ， 而 是 CSS 和 HTML 本 号 的 泻 染 机 制 
决定 了 这 样 的 结果 。 





4.4.3 ”如 何 实 现 前 面 兄 第 选择 符 的 效果 











但 是 我 们 在 实际 开发 的 时 候 ， 确 实 存在 很 多 场景 需要 控制 前 面 的 兄 
种 元 素 ， 此 时 又 该 怎么 办 呢 ? 





兄 第 选择 符 只 能 选择 后 面 的 元 素 ， 但 是 这 个 “后 面 ? 仅 仅 指 代码 层面 
的 后 面 ， 而 不 是 视觉 层面 的 后 面 。 也 就 是 说 ， 我 们 要 实现 前 面 兄弟 选择 
符 的 效果 ， 可 以 把 这 个 “前 面 的 元 素 ” 的 相关 代码 依然 放 在 后 面 ， 但 是 视 
党 上 将 它 呈 现在 前 面 束 可 以 了 。 











DOM 位 置 和 视觉 位 置 不 一 致 的 实现 方法 非常 多 ， 常 见 的 如 float 浮 
动 实现 ，absolute 绝 对 定位 实现 ， 所 有 有 具有 定位 特性 的 CSS 属 性 (如 
margin、left/top/right/bottom 以 及 transform) 也 可 以 实现 。 更 
高 级 点 的 就 是 使 用 direction 或 者 writing-mode 改 变 文 档 流 顺序 。 在 
移动 端 ， 我 们 还 可 以 使 用 Flex 布 局 ， 它 可 以 帮助 我 们 更 加 灵活 地 控制 
DOM 元 素 呈 现 的 位 置 。 





用 实例 说 话 ， 例 如 ， 我 们 要 实现 聚焦 输入 框 时 ， 前 面 的 描述 文 
字 “ 用 户 名 ”也 一 起 高 党 显示 的 效果 ， 如 图 4-12 所 示 。 





用 户 名 : 





用 户 名 : | 























图 4-12 ”输入 框 聚 焦 ， 前 面 文字 高 亮 显 示 的 效果 图 

















下 面 给 出 4 种 不 同 的 方法 来 实现 这 里 的 前 面 兄弟 选择 符 效 果 。 


(1) Flex 布 局 实现 。Flex 布 局 中 有 一 个 名 为 flex-direction 的 属 
性 ， 该 属性 可 以 控制 元 素 水 平 或 者 垂直 方 癌 呈现 的 顺序 。 


HTML 和 CSS 代 码 如 下 : 


<div class="cs-flex"> 
<input class="cs-input"><label class="cs-1abel"> 用 户 名 : </1label> 
</divy> 
.CS-flex { 
display: inline-flex; 
flex-direction: row-reverse; 
} 
.CS-input { 
width: 268px; 
} 
.CSs-label { 
width: 64px; 
} 
:focus ~ .cs-label { 
color: darkblue; 
text-shadow: 6 6 1px; 
} 





这 一 方法 主要 通过 flex-direction:row-reverse 调 换 元 素 的 水 
平 呈 现 顺序 来 实现 DOM 位 置 和 视觉 位 置 的 不 一 样 。 此 方法 使 用 简单 ， 
方便 快捷 ， 唯 一 的 问题 是 兼容 性 ， 用 户 群 是 外 部 用 户 的 蝎 面 端 网 站 项 目 
慎 用 ， 移 动 端 无 碍 。 








(2) float 浮 动 实现 。 通 过 让 前 面 的 <input> 输 入 框 右 浮 动 束 可 以 
实现 位 置 调换 了 。 


HTML 和 CSS 代 码 如 下 : 


<div class="cs-float"> 
<input class="cs-input"><label class="cs-label"> 用 户 名 : </label> 
</div> 
.CS-float { 
width: 264pX; 
} 
.CS-input { 
float: right; 
width: 260pX; 


} 

.CSs-label { 
display: block; 
overflow: hidden; 

} 

:focus ~ .cs-label { 
color: darkblue; 
text-shadow: 6 6 1px; 


} 











这 一 方法 的 兼容 性 极 佳 ， 但 仍 有 不 足 ， 首 先 就 是 容器 宽度 需要 根据 
子 元 素 的 宽度 计算 ， 当 然 ， 如 果 无 须 兼 容 下 8， 配合 calc( ) 计 算 则 没有 
这 个 问题 ， 其 次 就 是 不 能 实现 多 个 元 素 的 前 面 选择 符 效 果 ， 这 个 比较 致 











> 


O 


(3) absolute 绝 对 定位 实现 。 这 个 很 好 理解 ， 就 是 把 后 面 的 
<label> 绝 对 定位 到 前 面 就 好 了 。 





HTML 和 和 CSS 代码 如 下 : 





<div class="cs-absolute"> 


<input class="cs-input"><label class="cs-label"> 用 户 名 : </label> 





</div> 
.CS-absolute { 
width: 264px; 
position: relative; 
} 
.CS-input { 
width: 268px; 
margin-left: 64px; 


} 

.Cs-label { 
position: absolute; 
left: 8; 

} 


:focus ~ .cs-label { 
color: darkblue; 
text-shadow: 6 6 1px; 


} 








这 一 方法 的 兼容 性 不 错 ， 也 比较 好 理解 。 缺 点 是 当 元 系 较 多 的 时 
候 ， 控 制 成 本 比较 高 。 


(4) direction 属 性 实现 。 借 助 direction 属 性 改变 文档 流 的 顺 
序 可 以 轻松 实现 DOM 位 置 和 视觉 位 置 的 调换 。 


HTML 和 和 CSS 代码 如 下 : 





<div class="cs-direction"> 
<input class="cs-input"><label class="cs-label"> 用 户 名 : </1label> 
</div> 
/* 水 平 文档 流 顺 序 改 为 从 右 往 左 */ 
.CS-direction { 
direction: rtl; 


} 

/* 水 平 文 档 流 顺序 还 原 */ 

.CSs-direction .cs-label, 

.CS-direction .cs-input { 
direction: ltr; 


.CSs-label { 
display: inline-block; 
} 


:focus ~ .cs-label { 
color: darkblue; 
text-shadow: 6 6 1px; 

} 





这 一 方法 可 以 彻底 改变 任意 个 数 内 联 元 素 的 水 平 呈现 位 置 ， 兼 容 性 
非常 好 ， 也 容易 理解 。 唯 一 不 足 束 是 它 针 对 的 必须 是 内 联 元 素 ， 好 在 本 
各 例 的 文字 和 输入 框 束 是 内 联 元 素 ， 比 较 适 合 。 


大 致 总 结 一 下 这 4 种 方法 ，Flex 方 法 适合 多 元 素 、 块 级 元 素 ， 有 一 
定 的 兼容 性 问题 ; direction 方 法 也 适合 多 元 素 、 内 联 元 素 ， 没 有 兼容 
性 问题 ， 由 于 块 级 元 素 也 可 以 设置 为 内 联 元 素 ， 因 此 ，direction 方 法 
理论 上 也 是 一 个 终极 解决 方法 float 方 法 和 absolute 方 法 虽然 比较 适 
合 小 白 开 发 ， 也 没有 兼容 性 问题 ， 但 是 不 太 适 合 多 个 元 素 ， 比 较 适 合 
个 元 素 的 场景 。 大 家 可 以 根据 自己 项 目的 实际 场景 选择 合适 的 方法 。 











当然 ， 不 止 上 面 4 种 方法 ， 我 们 一 个 margin 定 位 也 能 实现 类 似 的 效 
朵 ， 这 里 就 不 一 一 展开 了 了。 


以 上 4 种 方法 均 配 有 演示 页 面 ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/selector/4/4-2.php 或 扫描 下 面 的 二 维 码 亲自 体验 
与 学 习 。 





4.5 快速 了 解 列 选择 符 双 管道 〈||) 


列 选择 答 是 规范 中 刚 出 现 不 久 的 新 选择 符 ， 目 前 浏览 器 的 兼容 性 还 
不 足以 让 它 在 实际 项 目 中 得 到 应 用 ， 因 此 我 仪 简单 介绍 一 下 ， 让 大 家 知 
道 它 大 致 是 干什么 用 的 。 








Table 布 局 和 Grid 布局 中 都 有 列 的 概念 ， 有 时 候 我 们 希望 控制 整 列 的 
样式 ， 有 两 种 方法 : 一 种 是 借助 :nth-col() 或 者 :nth-last-col() 伪 
类 ， 不 过 目前 浏览 器 尚未 支持 这 两 个 伪 类 ; 还 有 一 种 是 借助 原生 Table 
布局 中 的 <colgroup> 和 <col> 元 素 实 现 ， 这 个 方法 的 兼容 性 非常 好 。 








我 们 通过 一 个 简单 的 例子 快速 了 解 一 下 这 两 个 元 素 。 例 如 ， 表 格 的 
HTML 代 码 如 下 : 





<table border="1" width="666"> 
<colgroup> 
<col> 
<col span="2" class="ancestor"> 
<col span="2" class="brother"> 
</colgroup> 
<tr> 
<td> </td> 
<th scope="col"> 后 代 选 择 符 </th> 
<th scope="col"> 子 选择 符 </th> 








<th scope="col"> 相 邻 兄 弟 选 择 符 </th> 
<th _ scope="col"> 随 后 兄弟 选择 符 </th> 
</tr> 
<tr> 


<th scope="row"> 示 例 </th> 
<td>.foo .bar {}</td> 
<td>.foo > .bar {}</td> 
<td>.foo + .bar {}</td> 
<td>.foo ~ .bar {}</td> 
</tr> 
</table> 





可 以 看 出 表格 共有 5 列 。 其 中 ，<colgroup> 元 素 中 有 3 个 <col1> 元 
素 ， 从 span 属 性 值 可 以 看 出 ， 这 3 个 <co1> 元 素 分 别 占据 1 列 、2 列 和 2 
列 。 此 时 ， 我 们 给 后 面 2 个 <col> 元 素 设置 背景 色 ， 就 可 以 看 到 背景 
作用 在 整 列 上 了 。CSS 如 下 : 
.ancestor { 

background-color: dodgerblue; 


.brother { 
background-color: skyblue; 


} 





最 终 效 果 如 图 4-13 所 示 。 
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图 4-13 表格 中 的 整 列 样式 控制 


| 











但 是 有 时 候 我 们 的 单元 格 并 不 正好 属于 某 一 列 ， 而 是 跨 列 ， 此 
时 ，<col> 元 素 会 忽略 这 些 跨 列 元 素 。 举 个 例子 : 





<table border="1" width="260"> 
<colgroup> 
<col span="2"> 


<col class="selected"> 
</colgroup> 
<tbody> 
<tr> 
<td>A</td> 
<td>B</td> 
<td>C</td> 
</tr> 
<tr> 
<td colspan="2">D</td> 
<td>E</td> 
</tr> 
<tr> 
<td>F</td> 
<td colspan="2">G</td> 
</tr> 
</tbody> 
</table> 
col.selected { 
background-color: skyblue; 


} 





此 时 仪 C 和 E 两 个 单元 格 有 天 蓝 色 的 背景 色 ，G 单 元 格 虽然 也 覆 新 了 


第 三 列 ， 但 由 于 它 同 时 也 属于 第 二 列 ， 因 此 被 无 视 了 ， 效 果 如 图 4-14 所 
示 。 

















图 4-14 6 单元 格 没有 背景 色 





这 就 有 问题 了 。 很 多 时 候 ， 我 们 吉 是 要 G 单 元 格 也 有 背景 色 ， 只 要 


包含 该 列 ， 都 认为 是 目标 对 象 。 为 了 应 对 这 种 需求 ， 列 选择 符 应 运 而 
全; 


列 选择 符 写 作 双 管道 (|| ) ， 是 两 个 字符 ， 和 JavaScript 语 言 中 的 


逻辑 或 的 写法 一 致 ， 但 是 ， 在 CSS 中 却 不 是 “或 ?的 意思 ， 用 “属于 ”来 解 
通过 如 下 CSS 选 择 器 ， 可 以 让 G 单 元 格 也 有 背景 色 : 


col.selected || td { 
background-color: skyblue; 


} 


col.selected || td 的 含义 束 是 ， 选 择 所 有 属于 col. selected 
的 <td> 元 素 ， 哪 怕 这 个 <td> 元 素 横 跨 多 个 列 。 


于 是 ， 残 可 以 看 到 图 4-15 所 示 的 效果 。 

:jb 
D E | 
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图 4-15 6 单元 格 有 背景 


第 5 章 ”元 系 选 泉 硕 
元 素 选择 器 主要 包括 两 类 ， 一 类 是 标签 选择 器 ， 一 类 是 通配符 选择 
器 。 本 章 主要 介绍 你 可 能 不 知道 的 关于 这 两 类 选择 器 的 一 些 知识 。 
5.1 元素 选择 左 的 级 联 语 法 
不 同类 型 的 CSS 选 择 器 的 级 联 使 用 是 非常 常见 的 ， 例 如 : 


svg.icon { vertical-align: -.25em; } 


可 能 大 家 不 知道 的 是 ， 元 系 选 择 费 的 级 联 语法 和 其 他 选择 器 的 级 联 
语法 有 两 个 明显 的 不 同 之 处 。 











(1) 元 素 选 择 器 是 唯一 不 能 重复 自身 的 选择 器 。 
(2) 级 联 使 用 的 时 候 元 素 选 择 器 必须 写 在 最 前 面 。 
1. 不 能 重复 自身 


类 选择 圳 、ID 选 择 器 和 属性 值 匹配 选择 器 都 可 以 重复 自身， 例如 : 


.foo .foo {} 
#foo#foo {} 
[foo][foo] {} 





但 是 元 素 选 择 器 却 不 能 重复 自身 : 


foo*foo {} /* 无 效 */ 


有 人 可 能 见 过 这 样 的 用 法 ， 因 此 误 认 为 标签 可 以 重复 : 


svgla {} 





实际 上 ， 上 面 的 svg 是 命名 空间 ， 并 不 是 HTML 标 签 ， 并 且 要 提前 
声明 才 有 效 。 








因此 ， 元 系 选 择 器 无 法 像 其 他 选择 器 那样 通过 重复 目 身 提高 优先 
级 ， 不 过 好 在 由 于 其 自身 的 一 些 特 性 ， 还 有 其 他 办 法 可 以 提高 优先 级 。 





(1) 由 于 所 有 标准 的 HTML 页 面 都 有 <html1> 和 <body> 元 素 ， 因 此 
可 以 借助 这 些 标签 提高 优先 级 : 


body foo {} 


(2) 借助 :not() 伪 类 ， 括 号 里 面 是 任意 其 他 不 一 样 的 标签 名 称 即 


> 


foo:not(not-foo) {} 
foo:not(a) {} 
foo:not( ) {} 


上 面 两 种 提 咒 优先 级 的 方法 均 没有 与 其 他 选择 器 及 生 交 集 ， 是 非常 
安全 的 方法 ， 不 会 因为 其 他 选择 器 太 生 变化 而 失效 。 


2. 必须 写 在 最 前 


请 问 下 面 这 个 选择 器 是 否 合法 : 


[type="radio"]input {} 


通 配 选 择 器 也 是 一 样 : 
[type="radio"]* {} /* 无 效 */ 
只 能 (* 也 可 以 省 略 》: 


可 见 标 签 选 择 器 只 能 写 在 前 面 ， 这 个 特性 和 其 他 选择 器 明显 不 同 ， 
例如 类 选择 右 放 在 属性 值 匹配 选择 事后 面 是 完全 合法 的 : 


并 且 推 荐 把 类 选择 器 放 在 属性 值 匹配 选择 占 的 后 面 ， 因 为 CSS 选 择 
器 解析 是 从 右 往 左 进行 的 ， 类 名 放 在 后 面 性 能 会 更 好 。 


类 选择 器 甚至 可 以 放 在 伪 类 的 后 面 : 
5.2 ”标签 选择 器 二 三 事 


标签 选择 器 又 叫 类 型 选择 器 ， 它 是 一 个 相对 比较 简单 的 选择 器 ， 没 
什么 好 说 的 ， 这 里 讲 几 个 大 家 可 能 不 知道 的 小 知识 。 

之 前 有 提 到 过 的 标签 选择 器 是 不 区 分 大 小 写 的 ， 例 如 : 

不 过 知道 这 一 点 也 没什么 实际 用 处 ， 比 较 鸡 肪 ， 我 们 还 是 使 用 主流 


的 小 写 标签 名 。 


之 前 也 提 到 过 比较 正 陈 的 项 目 要 少 用 标签 选择 需 ， 因 为 它 的 性 能 不 
佳 ， 维 护 成 本 也 高 。 但 是 ， 如 宁 是 对 于 固定 组 合 的 标签 元 素 ， 那 么 使 用 
它 无 妨 ， 因 为 不 会 出 现 标 签 调整 ， 例 如 ， 原 生 表格 : 


.CS-table td， 
.CS-table th {} 


最 后 再 说 说 标签 选择 器 和 属性 选择 器 、 自 定义 元 素 之 间 的 事情 。 








5.2.1 标签 选择 占 混 合 其 他 选择 卓 有 的 优化 


很 多 开发 者 在 使 用 属性 选择 器 的 时 候 习 惯 把 标签 选择 器 也 带 上 ， 例 
如 : 


input[type="radio"] {} 
a[href^="http"] {} 





img[alt] {} 


实际 上 ， 这 里 的 标签 选择 器 是 可 以 省 略 的 ， 而 且 推荐 省 略 。 因 此 ， 








很 多 原生 属性 是 某 些 标签 元 素 特 有 的 。 例 如 ，'radio' 类 型 的 单 选 框 一 
定 是 input 标 签 ， 因 此 ， 直 接 将 它 写成 下 面 这 样 就 可 以 了 : 


这 样 ， 选 择 器 的 优先 级 和 类 选择 器 保持 一 致 ， 可 维护 性 得 到 提高 ， 
同时 性 能 也 有 提升 。 








类 似 的 还 有 : 


div#cs-some-id {} 


由 于 ID 是 唯一 的 ， 因 此 没有 任何 理由 在 这 里 使 用 div 标 签 选择 器 。 
5.2.2 标签 选择 厦 与 目 定 义 元 系 
对 于 现代 浏览 器 ， 我 们 可 以 直接 使 用 自 定义 元 素 的 标签 控制 自 定义 


元 素 的 样式 ， 例 如 : 


<X-element> 自 定义 元 素 </x-elememt> 
x-element { 
color: red; 





} 


这 样 文字 会 呈现 为 红色 。 


不 过 默认 仅 正 9 及 以 上 版 本 的 浏览 器 才 文 持 自 定 义 元 素 标 签 选 择 
器 ， 如 果 需 要 兼容 下 8， 需 要 在 <head> 创 建 如 下 所 示 的 一 段 JavaScript 代 
但 : 





5.3 ”特殊 的 标签 选择 器 : 通 配 选 择 需 





通 配 选 择 器 是 一 个 特殊 的 标签 选择 器 ， 它 可 以 指 代 所 有 类 型 的 标签 
元 素 ， 包 括 自 定义 元 素 ， 以 及 <script>、<style>、<title> 等 元 素 ， 
但 是 不 包括 伪 元 素 。 


它 的 用 法 是 使 用 字符 星 号 〈#*， 即 U+662A) ， 例 如 : 


* { box-sizing: border-box; } 


但 上 面 的 用 法 并 不 足以 覆盖 所 有 的 元 素 ， 因 为 有 些 元 素 是 无 特征 
的 ， 如 : :before 和: :after 构成 的 伪 元 素 ， 因 此 ， 很 多 人 重 置 所 有 元 
素 盒 模型 的 时 候 会 这 样 设置 : 








*, *;:;before, *::after { box-sizing: border-box; } 








他 们 都 没 意 识 到 后 面 两 个 星 号 是 可 以 省 略 的 ， 可 以 直接 用 : 


*, ::before, ::after { box-sizing: border-box; } 





当 通 配 选择 器 和 其 他 选择 器 级 联 使 用 的 时 候 ， 星 号 都 是 可 以 省 略 
的 。 例 如 ， 下 面 这 些 选 择 器 都 是 一 样 的 : 
。+*[hreflang|=en] 等 同 于 [hreflang|=en]:; 


。*.warning 等 同 于 .warning; 
。 *#myid 等 同 于 #myid。 


只 有 当 单 独 使 用 通 配 选择 器 的 时 候 ， 我 们 才 需 要 把 * 字 符 呈 现 出 
来 ， 例 如 ， 若 要 选择 所 有 <body> 元 素 的 子 元 素 ， 可 以 : 


body > * {} 


由 于 通 配 选 择 需 〈* ) 匹配 所 有 元 素 ， 因 此 它 是 比较 消耗 性 能 的 一 
种 CSS 选 择 器 ， 同 时 由 于 其 影响 甚 广 ， 容 易 出 现 一 些 意 料 之 外 的 样式 问 
题 ， 因 此 请 谨慎 使 用 。 











第 6 章 ”属性 选择 器 


我 们 平常 提 到 的 属性 选择 器 指 的 是 [type="radio"] 这 类 选择 器 ， 
实际 上 ， 这 是 一 种 简称 ， 指 的 是 “属性 值 匹 配 选 择 器 ”。 实 际 上 ， 在 正式 
文档 中 ， 类 选择 器 和 ID 选择 器 都 属于 属性 选择 器 ， 因 为 本 质 上 类 选择 器 
是 HTML 元 素 中 class 的 属性 值 ，ID 选 择 器 是 HITML 元 素 中 id 的 属性 
值 。 


属性 值 匹 配 选择 器 是 一 个 被 大 家 低估 的 选择 器 ， 筷 是 本 章 讨 论 的 重 
氮 。 


6.1 ID 选择 需 和 次 选 择 霹 


ID 选择 器 和 类 选择 器 都 属于 属性 选择 器 ， 它 们 的 身份 看 起 来 高 贵 而 
特殊 ， 毕 竞 HTML 原 生 属 性 那么 多 ， 就 1d 和 class 两 个 属性 有 专门 的 选 
择 器 。 实 际 上 ， 正 是 因为 它们 足够 普通 才 有 此 待遇 ， 几 乎 所 有 的 HTML 
元 素 都 支持 这 两 个 属性 。name、type 这 些 属性 也 很 常见 ， 但 它们 主要 
出 现在 控件 元 素 上 ， 如 果 所 有 元 素 都 文 持 name 属 性 ， 相 信和 它 也 会 有 专属 
于 自己 的 属性 选择 器 的 。 


ID 选择 器 和 类 选择 器 虽然 性 质 一 致 ， 都 属于 属性 选择 器 ， 但 是 它们 
的 实际 表现 却 有 明显 差 寞 。 


1. 语法 不 同 
ID 选择 器 前 面 的 字符 是 井 号 # 〈(U+0023) ， 而 类 选择 器 前 面 的 字符 
是 点 号 。(U+86862E) : 


/* ID 选择 器 */ 
#foo {} 





/* 类 选择 器 */ 
.foo {} 





2. 优先 级 不 同 


ID 选择 器 的 优先 级 比 类 选择 器 的 优先 级 高 一 个 等 级 ， 由 于 实际 开发 
中 往往 以 类 选择 器 为 主 ， 因 此 不 到 万 不 得 已 的 时 候 不 要 使 用 ID 选择 需 ， 
以 免 市 来 较 高 的 维护 成 本 。 





3. 唯一 性 与 可 重复 性 





ID 具有 唯一 性 ， 而 类 天 生 就 可 以 重复 使 用 。 于 是 ， 经 向 可 以 看 到 如 
下 用 法 : 


<button class="cs-button cs-button-primary"> 主 按钮 </button> 


.CS-button {} 
.Cs-button-primary {} 





但 是 ID 选 择 砷 不 能 这 么 用 : 


<button id="cs-button cs-button-primary"> 主 按钮 </button> 


#cs-button {} /* 无 效 */ 
#cs-button-primary {} /* 无 效 */ 





ID 选择 器 必须 是 完整 的 id 属性 值 ， 下 面 这 样 是 可 以 的 : 


#cs-button\20 cs-button-primary {} 


或 者 下 面 这 样 转 义 〈 后 面 的 空格 可 以 去 除 ) 


或 者 使 用 属性 值 匹配 选择 器 : 


[id~="cs-button"] {} 


[id~="cs-button-primary"] {} 





不 同 元 素 的 类 名 是 可 以 重复 的 ， 且 类 选择 器 可 以 控制 所 有 元 素 ， 例 
如 : 


<button class="cs-button"> 按 钮 1</button> 





<button class="cs-button"> 按 钮 2</buttony> 





此 时 ，.cs-button 选 择 嚣 设置 的 样式 可 以 同时 控制 “按钮 1? 和 “ 按 
钮 2”。 


.CS-button {} 


无 论 是 使 用 JavaScript 的 选择 器 API 获 取 元 素 ， 还 是 使 用 CSS 的 ID 选 
择 器 设置 样式 ， 对 于 ID， 其 在 语义 上 是 不 能 重复 的 ， 但 实际 开发 的 时 
候 ， 语义 重复 也 是 可 以 的 ， 这 并 不 影响 功能 。 





<button id="cs-button"> 按 钮 1</button> 

<button id="cs-button"> 按 钮 2</button> 

// 长 度 结果 是 2 

document .querySelectorA1l11( '#cs-button' ) .length ; 
/* 可 以 同时 设置 “按钮 12 和 “按钮 22 的 样式 */ 














但 并 不 推荐 这 么 做 ， 因 为 要 保证 ID 唯一 。 


6.2 属性 值 直接 匹配 选择 第 








属性 值 直 接 匹 配 选 择 费 包括 下 和 面 4 种 : 





[attr] 
[attr="val"] 


[attr~="val"] 
[attr|="val"] 





类 选择 器 的 兼容 性 不 错 ，IE8 及 以 上 版 本 的 浏览 器 完美 支持， 
ws 不 过 不 完美 ， 在 极 个 别 场景 中 有 瑕 兹 。 





其 中 ， 前 两 类 选择 占 大 家 用 得 相对 多 一 些 ， 而 后 面 两 类 选择 絮 很 多 
人 估计 见 都 没 见 过 ， 根 本 不 知道 它们 是 做 什么 用 的 ， 也 不 知道 它们 的 应 
用 价值 大 不 大 。 别 急 ， 这 就 融 大 家 了 解 一 下 这 几 类 选择 器 。 


6.2.1 详细 了 解 4 种 选择 需 
1. [attr] 


[attr] 表 示 只 要 包含 指定 的 属性 就 还 配 ， 尤 其 适用 于 一 些 HTML 布 
尔 属 性 ， 这 些 布 尔 属性 只 要 有 属性 值 ， 无 论 值 的 内 容 是 什么 ， 都 认为 这 
些 属性 的 值 是 true。 例 如 ， 下 面 所 有 的 输入 框 的 写法 都 是 蔡 用 的 : 


<input disabled> 





<input disabled=""> 

<input disabled="disabled"> 
<input disabled="true"> 
<input disabled="false"> 





此 时 ， 如 果 想 用 属性 选择 器 判断 输入 框 是 否 蔡 用 ， 直 接 用 下 面 的 选 
择 器 就 可 以 了 ， 无 须 关 心 具 体 的 属性 值 究 范 是 什么 : 


[disabled] {} 


说 到 disabled， 就 不 得 不 提 男 外 一 个 常见 的 布尔 属性 checked， 
两 者 看 上 去 近似 ， 实 际 上 却 有 不 小 差 








首先 ，IE7 浏 览 器 能 够 正常 识别 [disabled] 属 性 选择 器 ， 但 是 却 无 
法 识别 [checked]， 这 是 因为 由 于 某 些 未 知 的 原因 ，IE7 浏 览 器 使 
用 [defaultChecked] 人 代替 了 [checked]， 因 此 判断 元 素 是 否 为 选中 状 
态 需 要 像 下 面 这 样 与: 


/* IE7 浏 览 器 */ 
[defaultChecked] {} 


/* 其 他 浏览 器 */ 
[checked] {} 








然后 ， 就 算 浏览 器 文 持 [checked] 选 择 器 ， 也 不 建议 在 实际 项 目 中 
使 用 ， 因 为 在 浏览 器 下 有 一 个 很 奇特 的 行为 表现 ， 那 就 是 表单 控件 元 素 
在 checked 状 态 变 化 的 时 候 并 不 会 同步 修改 checked 属 性 的 值 ， 

而 disabled 状 态 就 不 会 这 样 。 例 如 ， 己 知 HTML 如 下 : 





<input id="checkbox" type="checkbox" checked disabled> 





此 时 ， 使 用 JavaScript 代 码 修改 复 选 框 的 状态 : 


checkbox .checked = false; 
checkbox.disabled = false; 


浏览 器 中 的 HTML 会 变 成 这 样 : 


<input id="checkbox" type="checkbox" checked> 





disabled 消 失 了 ， 但 是 checked 属 性 却 还 在 ， 也 就 是 明明 复 选 杠 
已 经 取消 了 选择 ， 但 是 [checked] 依 然 在 生效 ， 这 会 导致 严重 的 样式 显 
示 错 误 ， 因 此 实际 开发 不 能 使 用 [checked] 进 行 状态 控制 ， 也 正 是 由 于 

这 个 原因 ， 才 有 了 :checked 这 些 伪 类 。 如 果 非 要 使 用 (如 兼容 IE8〉， 
记得 在 每 次 选中 状态 变化 的 时 候 使 用 JavaScript 更 新 checked 属 性 。 











不 仅 原生 属性 文 持 属性 选择 器 ， 目 定义 属性 也 是 文 持 的 ， 例 如 : 


<a href class data-title=" 提 示 " role="button" > 删除 </ay> 





[data-title] {} 


2. [attr="val"] 


[attr="val"] 古 属性 值 完全 匹配 选择 器 ， 例 如 ，[ 匹 配 单 复 选 框 : 





[type="radio"] {} 





[type="checkbox"] {} 


或 者 <ol>、<menuy> 元 素 的 type 匹 配 : 





/* 小 写字 母 序号 */ 
ol[ltype="a"] {} 

/* 小 写 罗马 序号 */ 
ol[ltype="i"] {} 
menu[type="context"] {} 
menu[type="toolbar"] {} 





或 者 上 自 定 义 属 性 值 的 完整 匹配 : 


[data-type="1"] {} 


其 他 注意 事项 


(1) 不 区 分 单 引 号 和 双 引 号 ， 单 引号 和 双 引 号 都 是 合法 的 : 


[type=" radio"] {} 
[type= radio ' ] {} 


(2) 引号 是 可 以 省 略 的。 例如 : 


[type=radio] {} 
[type=checkbox] {} 


如 末 属 性 值 包含 空格 ， 则 需要 转 义 ， 例 如 : 


<button class="cs-button cs-button-primary"> 主 按钮 </button> 


[class=cs-button\8028cs-button-primary] {} 





或 者 还 是 老 老实 实 使 用 引号 : 


[class="cs-button cs-button-primary"] {} 


(3) [type=email] 等 选择 器 有 使 用 风险 ， 此 风险 只 会 出 现在 IE10 
及 其 以 上 版 本 浏览 器 的 兼容 模式 下 。 例 如 ， 我 们 在 页 面 上 写 下 如 下 











国 
| 


<input type="email"> 


如 果 此 时 兼容 模式 的 版 本 是 IE9 或 者 更 低 版 本 ， 则 浏览 器 会 自动 将 
HTML 中 的 type 属 性 值 改变 为 text: 


<input type="text"> 


这 会 导 任 [type=email] 这 个 选择 右 失 效 ， 从 而 产生 样式 问题 。 类 
似 的 type 属 性 值 还 包括 url1、number、tel 和 range。 


此 风险 只 会 出 现在 需要 兼容 下 浏览 器 的 项 目 中 ， 而 且 只 在 兼容 模式 
下 ， 在 原生 浏览 器 下 则 不 会 有 问题 ， 不 过 人 是 过 不 了 测试 工程 师 那 一 
天， 因此 ， 如 宁可 以 ， 还 是 使 用 类 选择 融 控 制 这 些 输入 框 的 样式 。 


但 是 如 果 是 使 用 完全 目 定 义 的 非 标准 HTML5 属 性 值 ， 则 没有 任何 
风险 ， 例 如 自 定 义 一 个 邮政 编码 类 型 的 输入 框 : 


<input type="zipcode"> 
/* 完全 正常 */ 








[type=zipcode] {} 





IE7 浏 览 器 不 能 识别 下 面 这 个 选择 器 : 

[type=checkbox] {} /* IE7 不 识别 */ 
但 是 了 正 7 浏 览 器 能 正音 识别 级 联 标签 选择 器 或 者 类 选择 器 : 
奇怪 的 是 ， 其 他 属性 并 没有 这 个 问题 : 


[id="foo"] {} /* IE7 识 别 */ 


男 外 ，IE7 浏 览 器 居然 区 分 属性 的 大 小 写 。 





IE8 浏 览 器 已 经 全 部 修复 了 以 上 问题 ， 因 此 可 以 放心 使 用 ， 毕 竟 现 
在 IE7 浏 览 絮 的 市 场 份额 已 经 很 低 了 。 


(4) 有 如 下 HTML: 


<input value="20"> 


此 时 ,下面 的 选择 器 是 可 以 匹配 的 ，IE8 及 以 上 版 本 的 浏 贤 颖 都 没 


问题 : 


[value="26"] {} 


此 时 ， 如 果 我 们 改变 输入 框 的 值 为 10， 无 论 是 手动 输入 还 是 使 用 
JavaScript 更 改 ， 属 性 选择 器 都 依然 按照 [value="26"] 泻 染 : 


input .value = 26; 
除非 ， 我 们 使 用 setAttribute 方 法 改变 属性 值 : 
input. setAttribute( 'value', 10); 
此 时 ， 属 性 选择 器 会 按照 [value="16" ] 泻 染 。 
3. [attr~="val"] 


[attr~="val"] 是 属性 值 单词 完全 匹配 选择 器 ， 专 门 用 来 匹配 属性 
中 的 单词 ， 其 中 ， 人 一 = 用 来 连接 属性 和 属性 值 。 


有 些 属 性 值 (如 class 属 性 、rel 属 性 或 者 一 些 自 定 义 属性 ) 包含 
多 个 关键 词 ， 这 时 可 以 使 用 空格 分 隔 这 些 关 键 词 ， 例 如 : 








此 时 就 可 以 借助 该 选择 器 实现 匹配 ， 例 如 : 


[rel~="noopener"] {} 





[rel~="nofollow"] {} 





匹配 的 属性 值 不 能 是 空 字符 串 ， 例 如 ， 下 面 这 种 选择 器 用 法 一 定 不 
会 匹配 任何 元 素 ， 因 为 它 的 属性 


人 


值 是 空 字符 串 : 


/* 无 任何 匹配 */ 
[rel~=""] {} 





如 有 果 匹 配 的 属性 值 只 是 部 分 字符 串 ， 那 么 也 是 无 效 的 。 例 如 ， 假 设 
有 选择 器 [attr~="val"]， 则 下 面 两 段 HIML 都 不 匹配 ; 


<!-- 不 匹配 --> 
<div attr="value"></div> 
<!-- 不 匹配 --> 


<div attr="val-ue"></div> 











但 是 ， 如 宋 字 符 串 前 后 有 空格 或 者 连续 多 个 空格 分 隔 ， 则 可 以 匹 
配 : 


<1-- 匹配 --> 


<div attr=" val "></div> 





<1-- 匹配 --> 


<div attr="val ue"></div> 





另外 ， 属 性 值 单 词 完全 匹配 选择 器 对 非 ASCII 范 围 的 字符 《如 中 


文 ) 也 是 有 效 的 。 例 如 ， 有 CSS 选 择 器 : 


[attr~= 帅 ] {} 


下 面 的 HTML 是 可 以 匹配 的 : 


<1-- 可 以 匹配 --> 





<div attr=" 我 帅 "> 我 帅 </divy> 


适用 场景 及 优势 


属性 值 单词 完全 匹配 选择 器 非常 适合 包含 多 种 组 合 属性 值 的 场景 ， 
例如 ， 茶 元 素 共 有 9 种 定位 控制 : 











data-align="left top"></div> 
data-align="top"></div> 
data-align="right top"></div> 
data-align="right"></div> 
data-align="right bottom"></div> 
data-align="bottom"></div> 
data-align="left bottom"></div> 
data-align="left"></div> 
data-align="center"></div> 








此 时 ， 最 佳 实践 就 是 使 用 属性 值 单词 完全 匹配 选择 需 ; 


[data-align] { left: 56%; top: 56%; } 
[data-align~="top"|] { top: 6; } 


[data-align~="right"] { right: 6; } 
[data-align~="bottom"] { bottom: 6; } 
[data-align~="left"] { left: 6; } 











这 样 的 CSS 代 码 足 够 精简 且 互 不 干扰 ， 有 专属 命名 空间 ， 代 人 码 可 读 
性 强 ， 且 选择 器 的 优先 级 和 类 名 一 致 ， 很 好 管理 。 


传统 实现 多 使 用 类 选择 器 ， 虽 然 技 术 上 没 问 题 ， 但 是 往往 元 素 本 喘 
就 有 类 名 ， 再 加 上 这 里 细 化 的 多 个 类 名 ， 代 码 就 显得 比较 吵 唆 和 混乱 : 


类 名 哆 唆 --> 
class="cs-align cs-align-left cs-align-top"></div> 


class="cs-align cs-align-top"></div> 
class="cs-align cs-align-right cs-align-top"></div> 











显然 ， 对 于 这 种 非 语义 化 的 同时 包含 多 个 属性 值 的 场景 ， 最 好 使 用 
专门 的 目 定 义 属 性 管理 ， 而 不 是 混合 在 类 名 中 ， 这 样 代 码 的 质量 更 高 ， 
开发 者 阅读 起 来 更 加 舒服 ， 也 更 利于 维护 和 管理 。 





4. [attr|="val"] 


[attr|="val"] 是 属性 值 起 始 片 段 完全 匹配 选择 器 ， 表 示 具 
有 attr 属 性 的 元 素 ， 其 值 要 么 正好 是 val， 要 么 以 val 外 加 短 横 线 - 
CU+662D) 开头 ，|= 用 于 连接 需要 匹配 的 属性 和 属性 内 容 。 





匹配 --> 
attr="val"></div> 

匹配 --> 
attr="val-ue"></div> 
匹配 --> 

attr="val-ue bar"></div> 

















不 匹配 --> 
attr="value"></div> 
不 匹配 --> 

attr="val bar"></div> 
不 匹配 --> 


attr="bar val-ue"></div> 





可 以 看 到 ， 这 个 选择 器 必须 严格 遵循 开头 匹配 的 规则 。 


另外 ， 这 个 选择 器 设计 的 初衷 是 子 语 言 匹 配 ， 用 在 <a> 元 素 的 
hreflang 属 性 或 者 任意 元 素 的 lang 属 性 中 。 














例如 ， 同 样 是 中 文 ， 它 们 也 会 有 简体 中 文 和 繁体 中 文 的 差异 ， 最 新 
的 标记 如 下 : 
。 简体 中 文 有 zh-cmn-Hans; 


。 繁体 中 文 有 zh-cmn-Hant:; 
。 英文 则 有 en-US、en-Latn-US、en-GB 等 。 





于 是 ， 束 可 以 借助 该 选择 器 来 下 配 中 文 类 或 英文 类 语言 ， 这 在 多 语 
言 功能 实现 时 比较 有 用 : 


匹配 中 文 类 语言 */ 
g|="zh"] {} 








/* 匹配 英文 类 语言 */ 
[lang|="en"] {} 





由 于 大 多 数 的 Web 开 发 都 用 不 到 多 语言 ， 因 此 该 选择 器 平时 很 少 用 
到 ; 再 加 上 :1lang 伪 类 的 存在 ， 进 一 步 减少 了 lang 属 性 匹配 语言 的 出 场 
机 会 ， 更 多 的 是 匹配 hreflang 属 性 中 的 语言 设置 。 


其 实 ， 只 要 HTML 的 属性 值 是 以 短 横 线 连接 的 ， 都 可 以 使 用 该 属性 
选择 器 ， 例 如 : 





<!-- 上 有 旧 语法 --> 











--> 


<input type="datetime-local"> 
[type|="datetime"] {} ”/* 新 旧 语 法 全 




















甚至 类 名 属性 值 也 可 以 用 来 进行 匹配 : 





<button class="cs-button-primary"> 主 按钮 </buttony> 
<button class="cs-button-success" > 成功 按 钮 </buttony> 
<button class="cs-button-warning" > 警示 按钮 </buttony> 





[class|=cs-button] {} /* 按钮 公用 样式 */ 
.CS-button-primary {} 
.CS-button-success {} 
.CS-button-warning {} 





举 按钮 的 例子 则 在 抛砖引玉 ， 并 不 是 让 大 家 就 这 么 使 用 ， 对 于 按钮 
这 类 公用 组 件 ， 还 是 建议 使 用 稳健 的 实现 方法 。 


6.2.2 AMCSS 开 发 模式 简介 


AMCSS 是 Attribute Modules for CSS 的 缩写 ， 表 示 借 助 HTML 属 性 来 
进行 CSS 相 关 开 发 。 


目前 主流 的 开发 模式 是 多 个 模块 由 多 个 类 名 控制 ， 例 如 : 





<button class="cs-button cs-button-large cs-button-blue"> 按 钮 </buttony> 


而 AMCSS 则 是 基于 属性 控制 的 ， 例 如 : 


<button button="large blue"> 按 钮 </button> 


为 了 避免 属性 名 称 冲 突 ， 可 以 给 属性 添加 一 个 统一 的 前 级 ， 如 
am-， 于 是 有 : 


<button am-button="large blue"> 按 钮 </button> 


然后 借助 [attr~="val"] 这 个 属性 值 单词 匹配 选择 器 进行 匹配 。 
因此 ， 主 流 类 选择 露 


.button {} 
.button-large {} 
.button-blue {} 


可 以 转换 成 


[am-button] {} 


[am-button~="large"] {} 
[am-button~="blue"] {} 





这 种 开发 模式 的 优点 是 : 每 个 属性 有 效 地 声明 了 一 个 单独 的 命名 空 
间 ， 用 于 封装 样式 信息 ， 从 而 产生 更 易于 阅读 和 维护 的 HTML 和 CSS。 


但 是 ，AMCSS 开 发 模式 也 并 不 是 完美 的 ， 完 全 舍弃 类 选择 器 是 不 
现实 的 。 我 一 贯 的 技术 理念 是 “海纳百川 ， 有 容 乃 大 ”， 因 此 ， 我 还 是 建 
议 大 家 ， 和 类 选择 器 的 命名 一 样 ， 采 用 一 种 混合 的 使 用 模式 。 也 就 是 
说 ， 当 我 们 的 布局 或 样式 需要 有 一 个 专门 的 命名 空间 的 时 候 ， 就 采用 
AMCSS 这 种 开发 模式 。 例 如 ， 上 一 节 中 [data-align]9 种 定位 的 实现 
就 非常 适合 AMCSS 这 种 开发 模式 ， 不 过 改 成 [am-align] 会 更 好 些 。 而 
对 于 普通 的 定位 与 布局 ， 还 是 采用 类 选择 器 最 为 合适 。 





6.3 ”属性 值 正则 匹配 选择 器 








属性 值 正则 匹配 选择 费 包 括 下 和 面 3 种 : 


[attr^="val"] 


[attr$="val"] 
[attr*="val"] 

















角 符 
表示 


美元 符号 $ 以 及 星 号 # 孝 是 正则 表达 式 中 的 特殊 标识 符 ， 分 另 
匹配 、 后 匹配 和 任意 匹配 。 


全 





这 3 种 属性 选择 器 就 完全 是 字符 匹配 了 ， 而 非 单词 匹配 。 其 中 ， 尖 
叶 ^、 
:前 匹 





这 几 个 选择 器 的 兼容 性 不 错 ，IE7 及 以 上 版 本 的 浏览 器 均 支 持 。 
下 面 就 详细 介绍 一 下 这 3 种 选择 器 。 

6.3.1 详细 了 解 3 种 选择 上 需 

1. [attr^="val"] 


[attr^="val"] 表 示 [ 逻 配 attr 属 性 值 以 字符 val 开 头 的 元 素 。 例 
如 : 


<1-- 匹配 --> 
<div attr="val"></div> 
<1-- 不 匹配 --> 


<div attr="text val"></div> 


<!-- 匹配 --> 
ee attr="value"></div> 
- 也 配 --> 


ey attr="val-ue"></div> 








一 些 细 市 


这 种 选择 器 可 以 匹配 中 文 ， 如 宁 匹 配 的 中 文 没 有 包含 特殊 字符 ， 如 
空格 等 ， 则 中 文 外 面 的 引号 是 可 以 省 略 的 ， 例 如 : 





[title^= 我 ] {} 


下 面 的 HTML 是 可 以 匹配 的 : 


<!-- 可 以 匹配 --> 


<div title=" 我 帅 "> 我 帅 </div> 








理论 上 可 以 匹配 空格 ， 但 由 于 下 浏览 器 会 自动 移 除 属性 值 首 尾 的 空 
格 ， 因 此 会 有 兼容 性 问题 ， 例 如 ， 下 面 的 样式 可 以 对 HTML 格式 进行 验 
证 : 

















/* 高 亮 类 属性 值 包含 多 余 空 格 的 元 素 */ 
[class^=" "] { 
outline: 1px solid red; 


} 





下 面 的 HIML 在 Firefox 浏 览 器 和 Chrome 浏 览 器 下 是 匹配 的 ， 在 正 浏 
览 堪 下 不 匹配 : 

















<!-- IE 不 匹配 ， 其 他 浏览 器 匹配 --> 


<div class=" active "> 测试 </divy> 








/* 无 效 */ 
[value^=""] {} 


实际 开发 中 ， 开 头 正 则 匹配 属性 选择 器 用 得 比较 多 的 地 方 是 判断 
<a> 元 素 的 链接 地 址 类 型 ， 也 可 以 用 来 显示 对 应 的 小 图 标 ， 例 如 : 





/* 链接 地 址 */ 

[href^="http"], 
[href^="ftp"], 
[href^="//"] { 


background: url(./icon-link.svg) no-repeat left; 


} 
/* 网 页 内 销 链 */ 
[href^="#"] { 
background: url(./icon-anchor.svg) no-repeat left; 


} 
/* 手机 和 邮箱 */ 
[href^="tel:"] { 
background: url(./icon-tel.svg) no-repeat left; 


} 
[href^="mailto:"] { 
background: url(./icon-email.svg) no-repeat left; 


} 





2. [attr$="val"] 


[attr$="val"] 表 示 匹 配 attr 属 性 值 以 字符 val 结 尾 的 元 素 。 例 
如 : 


匹配 --> 
attr="val"></div> 

匹配 --> 

attr="text val"></div> 
不 匹配 --> 
attr="value"></div> 

不 匹配 --> 


attr="val-ue"></div> 




















该 选择 器 的 细节 和 [attr^="val"] 的 一 怪 ， 这 里 不 再 袭 述 。 





在 实际 开发 中 ， 结 尾 正则 匹配 属性 选择 器 用 得 比较 多 的 地 方 是 判断 
<a> 元 素 的 链接 的 文件 类 型 ， 然 后 是 显示 对 应 的 小 图 标 。 例 如 : 





/* 指向 PDF 文件 */ 
[href$=" .pdf"] { 
background: url(./icon-pdf.svg) no-repeat left; 





} 
/* 下 载 zip 压 缩 文 件 */ 
[href$=" .zip"] { 


background: url(./icon-zip.svg) no-repeat left; 


} 
/* 图 片 链接 */ 
[href$=" .png"], 
[href$=" .gif"], 
[href$=" .jpg"], 
[href$=".jpeg"], 
[href$=" .webp"] { 
background: url(./icon-image.svg) no-repeat left; 


} 





3. [attr*="val"] 


[attr*="val"] 表 示 匹 配 attr 属 性 值 包含 字符 val 的 元 素 。 例 如 : 


匹配 --> 
attr="val"></div> 

匹配 --> 

attr="text val"></div> 
匹配 --> 
attr="value"></div> 
匹配 --> 
attr="val-ue"></div> 




















它 也 可 以 用 来 匹配 链接 元 素 是 否 是 外 网 地 址 ， 例 如 : 


a[href*="//""]:not([href*="example.com"]) {} 








此 外 ， 它 还 可 以 用 来 匹配 style 属 性 值 ， 这 在 实际 开发 中 用 得 非常 








多 。 例 如 ， 我 们 想 知 道 一 个 参与 JavaScript 交 互 的 元 素 是 否 隐 藏 ， 可 以 这 
么 处 理 : 


/* 该 元 素 隐 藏 */ 





[style*="display: none"] {} 


关于 style 属 性 值 匹配 的 细节 


当 使 用 JavaScript 给 DOM 元 素 设置 样式 的 时 候 ， 例 如 ; 


dom.style.display = "none 


无 论 是 什么 浏览 器 ， 样 式 属 性 和 之 间 都 会 有 美化 的 空格 ， 也 就 是 
说 ，HTML 会 是 下 面 这 样 : 


<div style="display: none;"></div> 





因此 ， 需 要 使 用 下 和 面 的 写法 进行 区 配 : 


[style*="display: none"] {} 


其 他 CSS 声 明 的 匹配 也 是 类 似 的 。 





但 是 ， 如 果 是 手写 的 style 值 ， 而 且 没 有 写 空 格 ， 就 像 下 面 这 样 : 





<div style="display:none;"></div> 


在 Chrome 和 Firefox 浏 览 右 下 ， 需 要 严格 按照 手写 字符 匹配 : 


[style*="display:none"] {} 


但 是 正 浏览 器 会 自动 格式 化 HTML 属 性 值 ， 所 以 我 们 还 是 使 用 带 空 
格 的 方式 匹配 。 如 果 项 目 需 要 兼容 下 浏览 促 ， 则 两 种 匹配 都 需要 : 


[style*="display:none"], 





[style*="display: none"] {} 


IE7 浏 览 器 虽然 文 持 属性 选择 器 ， 但 是 不 文 持 [style] 属 性 的 匹 
配 。 


如 果 是 无 法 识别 的 样式 ， 例 如 : 


<button style="-webkit-any: none;"> 按 钮 </button> 


[style*="-webkit-any: none"] {} 





IE8 及 以 上 版 本 的 浏览 器 都 是 能 准确 识别 的 。 但 是 ， 如 果 是 可 以 识 
别 的 样式 ， 例 如 : 


<button style="display: none;"> 按 钮 </button> 


[style*="display: none"] {} 





IE8 浏 览 器 反而 无 法 识别 了 ， 因 为 IE8 格 式 化 style 属 性 值 的 时 候 ， 
把 CSS 属 性 名 转换 成 大 写 了 ， 属 性 值 匹 配 选择 器 默认 是 严格 区 分 大 小 写 
的 ， 于 是 造成 匹配 障碍 ， 所 以 ， 我 们 需要 这 么 处 理 才 能 兼容 IE8: 


[style*="display: none"], 
/* for IE8 */ 


[style*="DISPLAY: none"] {} 








因此 ， 如 果 你 的 网 站 项 目 还 需要 兼容 IE8 浏 览 右 ， 则 需要 使 用 下 面 
这 种 组 合 确保 万 无 一 失 : 


[style*="display:none"], 


[style*="display: none"], 
[style*="DISPLAY: none"] {} 





但 是 ， 如 果 在 实际 开发 的 时 候 ，style 的 设置 是 可 控 的 ， 例 如 ， 奋 
你 只 会 设置 display 的 状态 ， 则 也 可 以 直接 使 用 下 面 的 匹配 : 





/* 认为 元 素 隐藏 */ 





[style*="none"] {} 





但 是 ， 如 果 你 的 页 面 需 要 在 iOS 系 统 的 微 信 客户 端 下 访问 ， 则 不 能 
文 么 使 用 ， 因 为 iDOS 系 统 的 微 信 客 户 端 会 私 目 增 加 -webkit-touch- 
callout :none 这 样 的 样式 ， 从 而 导致 异常 的 匹配 。 





6.3.2 CSS 必 性 选择 器 搜索 过 滤 抠 术 


我 们 可 以 借助 属性 选择 器 来 辅助 我 们 实现 搜索 过 滤 效 果 ， 如 通讯 
录 、 城 市 列表 ， 这 样 做 性 能 高 ， 代 码 少 。 


HTML 结 构 如 下 : 








<input type="search" placeholder=" 输 入 城市 名 称 或 拼音 
<U]> 


<1i data-search=" 重 庆 市 chongqing"> 重 庆 市 </1i> 








<1i data-search=" 哈 尔 滨 市 haerbin"> 哈 尔 滨 市 </1i> 
<1i data-search=" 长 春 市 changchun" > 长春 市 </1i> 








i 


此 时 ， 当 我 们 在 输入 框 中 输入 内 容 的 时 候 ， 只 要 根据 输入 内 容 动态 
创建 一 段 CSS 代 码 就 可 以 实现 搜索 匹配 效果 了 ， 无 须 目 己 写 代 码 进行 匹 
配 验 证 。 





var eleStyle = document.createElement('style'); 
document.head.appendChild(eleStyle); 

// 文本 框 输入 

input.addEventListener("input", function() { 





var value = this.value.trim(); 
elestyle.innerHTML = value ? '[data-search]:not([data-search*="'+ Value 


+'"]) 
{ display: none; }" : ''; 
}); 





最 终 效 果 如 图 6-1 所 示 。 





h| x ha x hai X 
重庆 市 哈尔滨 市 上 海 市 
哈尔滨 市 长 春 市 海口 市 
长 春 市 杭州 市 

兰州 市 长 沙市 

杭州 市 武汉 市 

长 沙市 上 海 市 

沈阳 市 郑州 市 

成 都 市 海口 市 

合肥 市 南昌 市 

武汉 市 

广州 市 

上 海 市 

郑州 市 

海口 市 

南昌 市 








图 6-1 ”属性 选择 器 与 搜索 过 滤 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/6/3-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








6.4 忽略 属性 值 大 小 写 的 正则 匹配 运算 符 


正则 匹配 运算 符 是 属性 选择 器 新 增 的 运算 符 ， 它 可 以 忽略 属性 值 大 
小 写 ， 使 用 字符 让 或 者 I 作 为 运算 符 值 ， 但 约定 俗 成 都 使 用 小 写字 母 1 作 
为 运算 符 。 语 法 如 下 : 











[attr~="val" i] {} 


[attr*="val" i] {} 





作用 对 比 示 意 ， 假 设 有 选择 器 [attr*="val"]， 则 : 


不 匹配 --> 
attr="VAL"></div> 

匹配 --> 

attr="Text val"></div> 
不 匹配 --> 
attr="Value"></div> 
不 匹配 --> 
attr="Val-ue"></div> 











如 果 选 择 器 是 [attr*="val"” i]， 则 : 





<1-- 匹 丁 
<div attr="VAL"></div> 
<1-- 匹 丁 
<div attr="Text val"></div> 














<1-- 匹 丁 
<div attr="Value"></div> 
<1-- 匹配 --> 

<div attr="Val-ue"></div> 

















可 以 看 到 ， 属 性 值 的 大 小 写 被 完全 无 视 了 。 





属性 值 大 小 写 不 敏感 运算 符 i 目 前 在 移动 端 可 以 放心 使 用 ， 尤 其 在 
搜索 匹配 用 户 昵称 或 者 账户 名 的 时 候 非常 有 用 ， 因 为 用 户 昵称 大 小 写字 
母 混杂 的 场景 非常 常见 。 因 此 ， 上 面 一 节 最 后 介绍 的 利用 属性 选择 器 实 
现 搜索 功能 的 技术 可 以 把 运算 符 i 也 包含 进去 ， 也 就 是 ; 








[data-search]:not([data-search*="value" i]) { 


display: none; 


} 





第 7 章 用户 行为 伪 类 


我 将 从 本 章 开 始 介 绍 CSS 伪 类 ，CSS 伪 类 是 CSS 选 择 器 最 有 趣 的 部 
分 ， 本 书 中 应 该 会 有 不 少 你 不 知道 的 高 级 技巧 和 应 用 知识 。 





用 户 行为 伪 类 是 指 与 用 户 行为 相关 的 一 些 伪 类 ， 例 如 ， 经 


过 :hover、 按 下 :active 以 及 聚焦 :focus 等 。 
7.1 手 型 经 过 伪 类 :hover 


:hover 是 各 大 浏览 器 最 早 支 持 的 伪 类 之 一 ， 最 早 只 能 用 在 <a> 元 素 
上 ,目前 可 以 用 在 所 有 HIML 元 素 上 ， 包 括 自 定义 元 素 。 


x-element:hover {} 


:hover 不 适用 于 移动 喘 ， 虽 然 也 能 触发 ， 但 消失 并 不 敏捷 ， 体 验 
反而 奇怪 。 


:hover 在 桌面 端 网 页 很 常用 ， 例 如 鼠标 经 过 时 改变 链接 的 颜色 ， 
或 者 改变 按钮 的 背景 色 等 。 除 了 这 个 基本 用 法 ， 我 们 还 可 以 利 
用 :hover 伪 类 实现 Tips 提 示 或 者 下 拉 列 表 效 果 ， 其 中 有 不 少 知识 大 家 
可 能 不 知道 ， 值 得 说 一 说 。 





7.1.1 体验 优化 与 :hover 延 时 








用 :hover 实 现 一 些 浮 层 类 效果 并 不 难 ， 但 是 很 多 人 在 实现 的 时 候 
没有 注意 到 可 以 通过 增加 :hover 延 迟 效 果 来 增强 交互 体验 。 








CSS :hover 触 发 是 即时 的 ， 于 是 ， 当 用 户 在 页 面 上 不 经 意 划 过 的 
时 候 ， 会 出 现 浮 层 履 盖 目 标 元 素 的 情况 ， 如 图 7-1 所 示 ， 本 想 hover 上 面 
的 删除 按钮 ， 结 果 鼠 标 滑 过 下 一 个 删除 图 标的 时 候 把 上 面 的 按钮 给 履 盖 
本 二 











标题 1 标题 2 操作 | 获 兰 了 目标 按 乌 


内 容 1 内 容 2 i 


图 7-1 ”hover 浮 层 窗 盖 目 标 元 素 的 体验 问题 


可 以 通过 增加 延 时 来 优化 这 种 体验 ， 方 法 就 是 使 用 visibility 属 
性 实现 元 素 的 显 隐 ， 然 后 借助 CSS transition 设 置 延 迟 显示 即 可 。 


例如 : 


.icon-delete: :before, 
.ijcon-delete::after { 
transition: visibility 6s .2s; 
visibility: hidden; 


} 


.icon-delete:hover: :before， 
.icon-delete:hover: :after { 
visibility: visible; 


} 





此 时 ， 当 我 们 鼠标 hover 按 钮 的 时 候 ， 浮 层 不 会 立即 显示 ， 也 就 不 
会 发 生 误 触 碰 导 致 浮 层 覆盖 的 体验 问题 了 。 读 者 可 以 手动 输入 





https://demo.cssworld.cn/selector/7/1-1.php 查 看 优化 后 的 效果 。 


7.1.2” 非 子 元 素 的 :hover 显 示 
当 借 助 :hover 伪 类 实现 下 拉 列 表 效 果 的 时 候 ， 相 信 很 多 人 都 是 通 
过 父子 选择 器 控制 的 。 例 如 : 


.datalist { 
display: none; 


.datalist-x:hover .datalist { 
display: block; 
} 





然而 实际 开发 的 时 候 ， 有 时 候 并 不 方便 陪 套 标签 ， 此 时 ， 我 们 也 可 
以 借助 相 邻 兄弟 选择 符 实 现 类 似 的 效果 ， 很 多 人 不 知道 这 点 。 举 个 简单 
的 例子 ， 实 现 一 个 鼠标 经 过 链接 来 预览 图 片 的 交互 效果 。 


<a href> 图 片 链接 </a> 
<img src="1.jpg"> 


我 们 的 目标 是 鼠标 经 过 链接 的 时 候 图 片 一 直 保 持 显示 ，CSS 代 码 其 
实 很 简单 : 


img { 
display: none; 
position: absolute; 


} 

a:hover + img, 

img:hover { 
/* 鼠 标 经 过 链接 或 鼠标 经 过 图 片 ， 图 片 自身 都 保持 显示 */ 
display: inline; 


} 














上 述 内 容 一 目 了 然 ， 就 不 多 解释 了 ， 主 流 浏览 需 全 兼容 这 个 伪 关 
可 以 放心 使 用 。 最 终 效果 示意 如 图 7-2 所 示 。 








图 7-2” ”hover 链接 显示 兄弟 图 片 元 素 





本 示例 配 有 演示 页 面 〈 和 更 面 浏 览 器 访问 ) ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/ selector/7/1-2.php 亲 自体 验 与 学 习 。 


然而 ， 上 面 的 实现 有 一 个 缺陷 ， 那 就 是 如 果 浮 层 图 片 和 触及 hover 
的 链接 元 素 中 间 有 间 际 ， 则 鼠标 还 没有 移动 到 图 片上 ， 图 片 就 隐藏 起 
来 ， 导 致 图 片 无 法 持续 显示 。 这 个 问题 也 是 有 办 法 解决 的 ， 那 就 是 借助 
CSS transition 增 加 延 时 。 








由 于 transition 属 性 对 display 无 过 渡 效 果 ， 而 对 visibility 有 
过 渡 效 果 ， 因 此 ， 几 斤 默认 隐藏 需要 改 成 visibility:hidden，CSS 代 
码 如 下 : 





im 


{ 
/* 拉 开 间 隐 ， 测 试用 */ 
margin-left: 26pXj 
/* 使 用 visibility 隐 藏 */ 
position: absolute; 
visibility: hidden; 





/* 设置 延 时 */ 

transition: visibility .2s; 
} 
a:hover + img, 
img:hover { 

visibility: visible; 


} 





最 终 效 果 如 图 7-3 所 示 。 
图 片 链 接 


则 际 


鼠标 经 过 图 
图 片 依然 保持 








图 7-3 ”hover 链 接 显 示 有 间隙 的 兄弟 图 片 元 素 





本 示例 配 有 演示 页 面 〈 和 更 面 浏 览 器 访问 ) ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/ selectoYV7/1-3.php 亲 自体 验 与 学 习 。 


7.1.3 纯 :hover 显 示 浮 层 的 体验 问题 
纯 :hover 显 示 浮 层 的 体验 问题 是 很 多 开发 人 员 都 没 意 识 到 的 。 例 


如 ， 某 开发 使 用 :hover 伪 类 实现 一 个 下 拉 染 单 功能 ， 纯 CSS 实 现 ， 他 觉 
得 自己 的 技术 很 历 害 ， 并 洋洋 得 意 ， 殊 不 知已 经 埋 下 了 巨大 的 隐患 。 








:hover 交 互 在 有 鼠标 的 时 候 确 实 很 方便 ， 但 是 如 果 用 户 的 鼠标 坏 
了 ， 或 者 设备 本 身 没 有 鼠标 (如 触 屏 设备 、 智 能 电视 ) ， 则 纯 :hover 


实现 的 下 拉 列 表 功 能 就 完全 次 痪 了 ， 根 本 没 法 使 用 ， 这 是 绝对 会 让 用 户 
抓 狂 的 非常 糟 料 的 体验 。 


对 于 带 交 互 的 行为 ， 一 定 不 能 只 使 用 :hover 伪 类 ， 还 需要 其 他 的 
处 理 。 


对 于 7.1.1 中 的 删除 按钮 的 Tips 提 示 ， 我 们 可 以 通过 增加 :focus 伪 
类 来 优化 体验 ， 如 下 : 


.icon-delete: :before, 
.ijcon-delete::after { 
transition: visibility 6s .2s; 
visibility: hidden; 
} 
.icon-delete:hover: :before, 
.ijcon-delete:hover::after { 
visibility: visible; 




















} 

/* 提高 用 户 体验 */ 

.icon-delete:focus: :before， 

.ijcon-delete:focus: :after { 
visibility: visible; 
transition: none; 








此 时 ， 使 用 键盘 上 的 Tab 键 聚焦 我 们 的 删除 按钮 ， 可 以 看 到 提示 信 
奶 依 然 出 现 了 ， 如 图 7-4 所 示 ， 如 果 不 加 :focus 伪 类 ， 则 用 户 无 法 感知 


提示 信息 。 


全 





图 7-4 ” focus 按钮 显示 提示 信息 


眼见 为 实 ， 读 者 可 以 手动 输入 https://demo.cssworld.cn/selector/7/ 1- 
4.php 杀 自体 验 与 学 习 。 











但 是 ， 对 于 本 号 束 带 有 链接 或 按钮 的 浮 层 元 素 ， 使 用 :focus 伪 类 
是 不 行 的 。 因 为 虽然 可 以 触发 浮 层 的 显示 ， 但 是 浮 层 内 部 的 链接 和 按钮 
却 无 法 被 反击 ， 因 为 通过 键盘 切换 焦点 元 素 的 时 候 ， 浮 层 会 因为 失 焦 而 
迅速 隐藏 。 不 过 是 有 其 他 解决 方法 的 ， 那 就 是 使 用 整体 焦点 伪 


类 :focus-within， 详 见 7.4 节 。 

















目前 还 浏览 器 并 不 支持 :focus-within， 那 对 于 需要 兼容 IE 浏 览 器 
的 项 目 又 该 怎么 处 理 呢 ? 我 的 建议 是 忽略 ， 因 为 使 用 下 浏览 器 且 又 无 法 
使 用 鼠标 操作 的 场景 非常 少见 ， 因 此 ， 我 们 只 使 用 :focus-within 来 增 
强 键 盘 访 问 体验 即 可 。 


当然 ， 如 宋 你 的 产品 用 户 体 量 很 大 ， 想 要 精益求精 ， 在 正 浏 览 右 下 
使 用 键盘 访问 也 能 完美 无 误 ， 则 可 以 使 用 下 面 这 个 即将 过 时 的 交互 准 
则 : 所 有 鼠标 经 过 按钮 ， 然 后 显示 下 拉 列 表 的 交互 ， 都 要 同时 保证 点 击 
行为 也 能 控制 下 拉 列 表 的 显示 和 隐藏 。 也 就 是 说 ， 仅 使 用 CSS 代 码 实现 
鼠标 经 过 显示 下 拉 列 表 的 效果 是 不 够 的 ， 还 需要 使 用 JavaScript 代 码 额 外 
实现 一 个 点 击 交 互 。 








7.2 ”激活 状态 伪 类 :active 


本 节 将 介绍 :active 伪 类 相关 的 基础 知识 、 实 践 技巧 和 高 级 应 用 。 


7.2.1 :active 伪 类 概述 


:active 伪 类 可 以 用 于 设置 元 素 激 活 状态 的 样式 ， 可 以 通过 点 击 鼠 
标 主键 ， 也 可 以 通过 手指 或 者 触 控 笔 点 击 触 摸 屏 触发 激活 状态 。 具 体 表 
现 如 下 ， 点 击 按 下 触发 :active 伪 类 样式 ， 点 击 抬 起 取消 :active 伪 类 
样式 的 应 用 。:active 伪 类 文 持 任 意 的 HTML 元素， 例如 
<div>、<span> 等 非 控 件 元 素 ， 甚 衬 是 自 定义 元 素 : 














p:active { 
background-color: skyblue; 


} 
x-element:active { 
background-color: teal; 


} 





然而 ， 落 地 到 实践 ，:active 伪 类 并 没有 理论 上 那么 完美 ， 包 括 以 
下 帮 霹 5 


(1) 正 浏 览 器 下 :active 样 式 的 应 用 是 无 法 冒 泡 的 ， 例 如 : 


img:active { 
outline: 38px solid #ccc; 
} 


p:active { 


background-color: teal; 
} 


<p><img src="1.jpg"></p> 








此 时 ， 点 击 <img> 元 素 的 时 候 ， 在 正 浏览 器 下 ，《<p> 元 素 是 不 会 触 
发 :active 伪 类 样式 的 ， 实 际 上 祖先 元 素 的 :active 样 式 也 应 当 被 应 
用 。 在 Chrome 以 及 Firefox 等 浏览 器 下 ， 其 表现 符合 预期 。 


(2) 在 正 浏览 器 下 ，<htm1>、<body> 元 素 应 用 :active 伪 类 设置 
背景 色 后 ， 背 景色 是 无 法 还 原 的 。 具 体 来 说 就 是 ， 鼠 标 按 下 确实 应 用 
了 :active 设 置 的 背景 色 ， 但 是 鼠标 抬 起 后 背景 色 却 没有 还 原 ， 而 且 此 
时 无 论 怎么 点 击 鼠 标 ， 背 景色 都 无 法 还 原 。 这 是 一 个 很 奇怪 的 bug， 普 

通 元 素 不 会 有 此 问题 ， 这 个 问题 甚至 比 在 正 7 浏 览 器 下 链接 元 素 必 须 失 
焦 才 能 取消 :active 样 式 还 要 糟糕 。 














/* IE 浏览 器 下 以 下 :active 背 景色 样式 一 旦 应 用 就 无 法 还 原 */ 
body :active { background-color: gray; } 


html:active { background-color: gray } 
:root:active { background-color: gray; } 





但 是 其 他 一 些 CSS 属 性 却 是 正常 的 ， 例 如 : 


/* IE 浏览 器 下 以 下 :active 样 式 正 常 */ 


body:active { color: red; } 


html:active { color: red; } 
:root:active { color: red; } 





(3) 移动 端 Safari 浏 览 器 下 ，:active 伪 类 默认 是 无 效 的 ， 需 要 设 
置 任意 的 touch 事 件 才 支持 。 我 们 可 以 加 这 么 一 行 JavaScript 代 人 码 : 


document .body.addEventListener('ontouchstart', function() {}); 


然而 ， 虽 然 此 时 :active 伪 类 可 以 生效 了 ， 但 是 :active 样 式 应 用 
的 时 机 还 是 有 问题 ， 因 此 ， 如 果 你 对 细节 的 要 求 比较 高 ， 建 议 在 Safari 
浏览 器 下 还 是 使 用 原生 的 -webkit-tap-highlight-color 实 现 触 摸 高 
亮 反馈 更 好 : 





body { 
-webkit-tap-highlight-color: rgba(6,6,0,，.05) 


| 
另外 ， 键 盘 访 问 无 法 触发 :active 伪 类 。 例 如 ，<a> 元 素 在 focus 
状态 下 按 下 Enter 键 的 事件 行为 与 点 击 一 致 ， 但 是 ， 不 会 触发 :active 伪 


类 。 


最 后 ，:active 伪 类 的 主要 作用 是 反馈 点 击 交 互 ， 让 用 户 知道 他 的 
点 击 行为 已 经 成 功 触发 ， 这 对 于 按钮 和 链接 元 素 是 必 不 可 少 的 ， 否 则 会 
有 体验 问题 。 由 于 :active 伪 类 作用 在 按 下 的 那 一 段 时 间 ， 因 此 不 适合 
用 来 实现 复杂 交互 














7.2.2 ”按钮 的 通用 :active 样 式 技巧 


本 技巧 更 适用 的 场景 是 移动 端 开发 ， 因 为 果 面 端 可 以 通过 :hover 
反馈 状态 变化 ， 而 移动 端 只 能 通过 :active 反 馈 。 要 知道 一 个 移动 端 项 
目 会 有 非常 多 需要 点 击 反馈 的 链接 和 按钮 ， 如 果 对 每 一 个 元 素 都 去 设 
置 :active 样 式 ， 成 本 还 是 挺 高 的 。 这 里 介绍 几 个 通用 处 理 技巧 ， 和 希望 
可 以 节约 大 家 的 开发 时 间 。 

















一 种 是 使 用 box-shadow 内 阴影 ， 例 如 : 


[href|]:active, 
button:active { 


box-shadow: inset 6 6 6 999px rgba(0,06,0,.085); 





} 


这 种 方法 的 优点 是 它 可 以 兼容 到 下 9 浏览 器 ， 缺 点 是 对 非 对 称 闭合 
元 素 无 能 为 力 ， 例 如 <input> 按 钮 : 


<!-- 内 阴影 无 效 --> 
<input type="reset"” value=" 重 置 "> 





<input type="button"” value=" 按 钮 "> 
<input type="submit"” value=" 提 交 "> 





另外 一 种 方法 是 使 用 Linear-gradient 线 性 渐变 ， 例 如 : 


[href] :active， 
button:active, 
[type=reset]:active， 


[type=button] :active， 
[type=submit]:active { 

background-image: linear-gradient(rgba(06,06,06,.65), rgba(6,08,0, .65)); 
} 











这 种 方法 的 优点 是 它 对 <input> 按 钮 这 类 非 对 称 闭合 元 素 也 有 效 ， 
缺点 是 OA 如 果 你 的 项 目 还 需要 兼 
容 IE9 浏 览 器 ， 就 会 有 一 定 的 限制 。 


最 后 再 介绍 一 种 在 特殊 场景 下 使 用 的 方法 。 有 了 时候， 我 们 的 链接 元 
素 包 于 的 是 一 张 图 片 ， 如 下 : 


<a href><img src="1.jpg"></a> 


如 果 <a> 四 周 没 有 padding 留 白 ， 则 此 时 上 面 两 种 通用 技巧 都 没有 
效果 ， 因 为 :active 样 式 被 图 片 挡住 了 。 











不 少 人 会 想到 使 用 : :before 伪 元 素 在 图 片上 履 盖 一 层 半 透明 颜色 
模拟 :active 效 果 ， 但 这 种 方法 对 父 元 素 有 依赖 ， 无 法 作为 通用 样式 使 
用 ， 此 时 ， 可 以 试 试 outline， 如 下 : 





[href] > img:only-child:active { 
outline: 999px solid rgba(6,6,0,，.05); 


outline-offset: -999px; 
-webkit-clip-path: polygon(6 86，166% 8，166% 166%, 8 166%) ; 
clip-path: polygon(6 6，166% 6，166% 1066%, 8 166%) ; 








这 种 方法 的 优点 是 CSS 的 冲突 概率 极 低 ， 对 非 对 称 财 合 元 素 也 有 
效 。 缺 点 是 不 适合 需要 兼容 下 浏览 器 的 产品 ， 因 为 虽然 IE8 浏 览 器 就 已 
经 支持 outline 属 性 ， 但 是 outline-offset 从 Edge 15 才 开始 被 支持 。 
还 有 男 外 一 个 缺点 就 是 ，outline 模 拟 的 反馈 浮 层 并 不 是 位 于 元 素 的 底 
层 ， 而 是 位 于 元 素 的 上 方 ， 且 可 以 被 绝 对 定位 子 元 素 罕 透 ， 因 此 不 适合 
用 在 包含 复 洒 DOM 信 息 的 元 系 中 ， 但 是 特别 适用 于 类 似 图 片 这 样 的 单 
一 元 素 。 











总 结 一 下 就 是 ，out1line 实 现 :active 反 馈 适 合 移动 端 ， 适 合 图 片 





在 实际 开发 中 ， 大 家 可 以 根据 目 己 的 需求 组 合 使 用 上 面 的 几 个 技 
巧 ， 以 保证 所 有 的 控件 元 素 都 有 点击 反馈 。 例 如 : 





body { 
-webkit-tap-highlight-color: rgba(6,6,0,9); 
} 
[href|]:active, 
button:active, 
[type=reset]:active, 
[type=button]:active, 
[type=submit]:active { 


background-image: linear-gradient(rgba(06,6,06,.065), rgba(6,08,0, .65)); 
} 
[href] img:active { 
outline: 999px solid rgba(6,6,0,，.05); 
outline-offset: -999px; 
-webkit-clip-path: polygon(6 86，166% 606, 166% 166%, 8 166%) ; 
clip-path: polygon(6 6，166% 6，166% 1066%, 8 166%) ; 





7.2.3 :active 伪 类 与 CSS 数 据 上 报 


如 果 想 要 知道 两 个 按钮 的 点 击 率 ，CSS 开 发 者 可 以 自己 动手 ， 无 须 
劳 烦 JavaScript 开 发 者 去 埋 点 : 
.button-1:active::after { 


content: url(./pixel.gif?action=click&id=button1); 
display: none; 


.button-2:active::after { 
content: url(./pixel.gif?action=click&id=button2); 
display: none; 


} 





此 时 ， 当 点 击 按钮 的 时 候 ， 相 关 行 为 数据 就 会 上 报 给 服务 器 ， 这 种 
上 报 ， 束 算 把 JavaScript 禁 用 挥 也 无 法 阻止 ,方便 快捷 ， 特 别 适合 A/B 测 
试 。 

7.3 ”焦点 盆 类 :focus 


:focus 是 一 个 从 IE8 浏 览 器 开始 支持 的 伪 类 ， 它 可 以 匹配 当前 处 于 








聚焦 状态 的 元 素 。 例 如 ， 高 亮 显示 处 于 聚焦 状态 的 textarea> 输 入 框 
的 边框 : 


textarea { 
border: 1px solid #ccc; 


} 


textarea:focus { 
border-color: HighLight; 





} 


这 样 的 方式 相信 大 家 都 用 过 ， 不 过 ， 接 下 来 要 深入 介绍 的 知识 很 多 


人 可 能 就 不 知道 了 。 
7.3.1 ” :focus 伪 类 [匹配 机 制 


与 :active 伪 类 不 同 ，:focus 伪 类 默认 只 能 匹配 特定 的 元 素 ， 包 
括 : 


。 非 disabled 状 态 的 表单 元 素 ， 如 <input> 输 入 框 、<select> 下 拉 
框 、<button> 按 钮 等 ; 

。 包含 href 属 性 的 <a> 元 素 ; 

。<area> 元 素 ， 不 过 可 以 生效 的 CSS 属 性 有 限 ; 

。HTML5 中 的 <summary> 元 素 。 


其 他 HTML 元 素 应 用 :focus 伪 类 是 无 效 的 。 例 如 : 


body:focus { 
background-color: skyblue; 


} 





此 时 点 击 页 面 ，<body> 元 素 不 会 有 任何 背景 色 的 变化 (IE 的 表现 
有 问题 ， 请 忽略 ) ， 虽 然 此 时 的 document.activeElement 就 


是 <body > 元素 。 


如 何 让 普通 元 素 也 能 啊 应 :focus 伪 类 呢 ? 





设置 了 HTML contenteditable 属 性 的 普通 元 素 可 以 应 用 :focus 
伪 类 。 例 如 : 


<div contenteditable="true></div> 


<div contenteditable="plaintext-only"></div> 


因为 此 时 <div> 元 素 是 一 个 类 似 <textarea> 元 素 的 输入 框 。 


设置 了 HTML tabindex 属 性 的 普通 元 素 也 可 以 应 用 :focus 伪 类 。 
例如 ， 下 面 3 种 写法 都 是 可 以 的 : 


<div tabindex="-1"> 内 容 </divy> 
<div tabindex="6"> 内 容 </divy> 


<div tabindex="1"> 内 容 </divy> 





如 果 期 望 <div> 元 素 可 以 被 Tab 键 索引 ， 且 被 点 击 的 时 候 可 以 触 
发 :focus 伪 类 样式 ， 则 使 用 tabindex="8"; 如 果 不 期 望 <div> 元 素 可 
以 被 Tab 键 索引 ， 且 只 在 它 被 点 击 的 时 候 触发 :focus 伪 类 样式 ， 则 使 
用 tabindex="-1"。 对 于 普通 元 素 ， 没 有 使 用 上 自然数 作为 tabindex 属 
性 值 的 场景 。 





既然 普通 元 素 也 可 以 响应 :focus 伪 类 ， 是 不 是 就 可 以 利用 这 种 特 
性 实现 任意 元 素 的 点 击 下 拉 效 果 呢 ? 


如 果 纯 展示 下 拉 内 容 ， 无 交互 效果 是 可 以 的 。 例 如 ， 实 现 一 个 点 击 
二 维 码 图 标 显 示 完 整 二 维 码 图 片 的 交互 效果 : 


<img src="icon-qrcode.svg" tabindex="0"> 
<img class="img-qrcode" src="qrcode.png"> 


.img-qrcode { 
position: absolute; 
display: none; 

} 

:focus + .img-qrcode { 
display: inline; 


} 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/7/3-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








可 以 看 到 ， 点 击 小 图 标 ， 二 维 码 图 片 显示 ， 点 击 空白 处 ， 图 片 又 会 
隐藏 ， 这 正 是 我 们 需要 的 效果 。 


但 实际 上 ， 使 用 :focus 控 制 元 素 的 显 隐 并 不 完美 ， 在 iOS Safari 浏 








览 占 下 ， 元 素 一 旦 处 于 focus 状 态 ， 除非 点 击 其 他 可 聚焦 元 素来 转移 
focus 焦 点 ， 否 则 这 个 元 素 会 一 直 保 持 focus 状 态 。 各 个 损 面 浏览 
Android 浏 览 占 均 无 此 问题 。 不 过 这 个 问题 也 好 解决 ， 只 需要 给 祖先 容 


器 元 素 设 置 tabindex="-1"， 同 时 取消 该 元 素 的 outline 样 式 即 可 ， 代 
人 码 示 意 如 下 : 
<body> 


<div class="container" tabindex="-1"></div> 
</body> 


.Container { 
outline: 6 none; 


} 





这 样 ， 点 击 二 维 码 图 标 以 外 的 元 素 束 会 把 焦点 转移 到 .container 





元 素 上 ，iOS Safari 浏 览 器 的 交互 就 正常 了 。 如 果 在 使 用 JavaScript 进 行 
开发 的 时 候 遇 到 iOS Safari 浏 览 器 不 触发 blur 事 件 的 问题 ， 也 可 以 用 这 
种 方法 解决 。 需 要 注意 的 是 ，tabindex="-1" 设 置 在 <body> 元 素 上 是 
无 效 的 。 








但 这 个 方法 只 适用 于 纯 展 示 的 下 拉 效 果 ， 如 果 下 拉 浮 层 内 部 有 其 他 
交互 效果 ， 则 此 方法 惑 有 问题 ， 要 么 失 焦 ， 要 么 焦点 转移 ， 都 会 导致 下 
拉 浮 层 的 消失 。 过 到 这 种 场景 ， 可 以 使 用 下 一 节 要 介绍 的 整体 焦点 伪 


类 :focus-within。 








最 后 一 点 ， 一 个 页 面 永远 最 多 有 一 个 焦点 元 素 ， 这 也 束 意 味 着 一 个 
页 面 最 多 只 会 有 一 个 元 素 啊 应 :focus 伪 类 样式 。 


7.3.2 :focus 伪 类 与 outlLine 
本 节 将 深入 介绍 :focus 伪 类 与 outline 轮 万 之 间 的 关系 。 
1. 一 个 常见 的 糟糕 的 业余 做 法 


很 多 开发 人 员 不 知道 从 哪里 粘贴 的 CSS reset 人 代码， 居然 有 下 面 这 
样 糟 料 的 样式 代码 : 


或 者 


a { outline: 6 none; } 





在 我 看 来 ， 真 的 是 一 点 常识 都 没有 。 





在 很 多 年 前 的 下 浏览 嚣 时代， 点 击 任意 的 链接 或 者 按钮 都 会 出 现 一 
个 虚 杠 轮廓， 影响 美观 ， 于 是 就 有 人 想到 设置 outline 为 none 来 进行 重 
置 ， 这 也 算 可 以 理解 。 但 是 现在 都 什么 年 代 了 ， 浏 览 右 早 就 优化 了 这 种 
体验 ， 鼠 标点 击 链接 是 不 会 有 虚 框 轮廓 或 者 外 发 光 轮 廓 的 ， 因 此 完全 没 
有 任何 理由 重 置 out1ine 属 性 ， 这 反而 带 来 了 严重 的 体验 问题 ， 那 就 是 
完全 无 法 使 用 键盘 进行 无 障碍 访问 。 











使 用 键盘 访问 网 页 其 实 是 很 常见 的 ， 例 如 ， 鼠 标 没 电 或 者 鼠标 坏 
了 ， 使 用 智能 电视 的 遥控 器 访问 页 面 ， 使 用 键盘 进行 快捷 操作 。 使 用 键 
ee 问 键 裔 历 链接 和 按钮 元 
素 ， 使 它们 处 于 focus 状 态 ， 此 时 浏览 器 会 通过 虚 框 或 者 外 发 光 的 形式 
进行 区 分 和 提示 ， 这 样 用 户 就 知道 目前 访问 的 是 哪 一 个 元 素 ， 按 下 确认 
键 就 可 以 达到 自己 想 要 的 目标 。 但 是 ， 如 果 设 置 outline:none， 取 消 
了 元 素 的 轮廓 ， 用 户 就 根本 无 法 知道 现在 到 底 哪个 元 素 处 于 focus 状 

， 网 站 完全 没 法 使 用 ， 这 是 极其 糟糕 的 用 户 体验 。 








如 果 你 对 浏览 器 默认 的 轮廓 效果 不 满意 ， 想 要 重 置 它 也 是 可 以 的 ， 
但 是 一 定 不 要 忘记 设置 新 的 :focus 样 式 效果 。 


例如 ， 如 果 和 希望 聚焦 表单 输入 框 的 时 候 呈 现 的 不 是 黑 边 框 或 是 外 发 
光 效 果 ， 而 是 边框 高 亮 显 示 ， 则 可 以 : 








textarea:focus { 
outline: 6 none; 
border-color: HighLight; 


站 | 

事情 还 没有 结束 ，Chrome 浏 览 器 下 ， 当 设置 了 背景 的 <button> 元 
素 、<summary> 元 素 以 及 设置 了 tabindex 属 性 的 普通 元 素 被 点 击 的 时 
候 ， 也 会 显示 浏览 器 默认 的 外 放 光 轮廓 ， 从 体验 角度 讲 ， 点 击 行为 不 应 
该 出 现 外 放 光 轮廓 ， 外 放 光 轮廓 应 该 只 在 键盘 focus 的 时 候 才 触发 ， 
Firefox 浏 览 器 和 正 浏 览 器 在 这 一 点 上 做 得 不 错 。 














问题 来 了 ， 如 果 设 置 outline 为 none， 则 使 用 键盘 访问 就 有 问题 ; 
如 果 不 设置 ， 则 点 击 访问 体验 不 佳 。 矛 盾 由 此 产生 ， 对 于 占 比 最 高 的 
Chrome 浏 览 器 ， 我 们 如 何 兼顾 点 击 的 样式 体验 和 键盘 的 可 访问 性 呢 ? 








最 好 的 方法 就 是 使 用 7.5 节 中 介绍 的 :focus-visible 伪 类 ， 它 是 专 
门 为 这 种 场景 设计 的 。 


2. 模拟 浏览 器 原生 的 focus 轮 万 


在 实际 开发 过 程 中 难免 会 过 到 需要 模拟 浏览 器 原生 聚焦 轮廓 的 场 
景 ，Chrome 浏 览 器 下 是 外 发 光 ，IE 和 Firefox 浏 览 器 下 则 是 虚 点 ， 理 论 上 
讲 ， 使 用 如 下 CSS 代 码 是 最 准确 的 : 

:focus { 


outline: 1px dotted; 
outline: 5px auto -webkit-focus-ring-color; 


} 





对 于 一 些小 图 标 ， 可 能 会 设置 color:transparent， 还 有 一 些 按 
钮 的 文字 颜色 是 淡色 ， 这 会 导致 压 和 Firefox 浏 览 器 下 虚 框 轮 亡 不 可 见 ， 








因此 ， 在 实际 开发 的 时 候 ， 我 会 指定 虚线 颜色 : 


:focus { 
outline: 1px dotted HighLight; 


outline: 5px auto -webkit-focus-ring-color; 


} 





7.3.3 ”CSS :focus 伪 类 与 键盘 无 障碍 访问 


:focus 伪 类 与 键盘 无 障碍 访问 密切 相关 ， 因 此 ， 实 际 上 需要 使 
用 :focus 伪 类 的 场景 比 预想 的 要 多 ， 以 前 你 的 很 多 实现 其 实 是 有 问题 
的 。 





1. 为 什么 不 建议 使 用 span 或 div 按 钮 


<span> 或 者 <div> 元 素 也 能 模拟 按钮 的 UI 效果 ， 但 并 不 建议 使 用 。 
一 来 原生 的 <button> 元 素 可 以 触发 表单 提交 行为 ， 使 表单 可 以 原生 文 
持 Enter 键 ;二 来 原生 的 <button> 天 然 可 以 被 键盘 focus， 保 证 我 们 的 
页 面 可 以 纯 键 盘 无 障碍 访问 。 


但 是 <span> 或 者 cdiv> 按 钮 是 没有 上 和 面 这 些 行为 的 ， 如 果 要 支持 这 
些 比 较 好 的 原生 特性 ， 要 么 需要 额外 的 JavaScript 代 码 ， 要 么 需要 额外 的 
HTML 属 性 设置 。 例 如 ，tabindex="e" 支 持 Tab 键 索 
引 ，role="button" 支 持 屏 幕 阅读 器 识别 等 。 





总 之 ， 使 用 <span> 或 者 <div> 模 拟 按 钮 的 UI 效果 是 一 件 高 成 本 低 收 
益 的 事情 ， 不 到 万 不 得 已 ， 没 有 使 用 <span> 或 者 cdiv> 模 拟 按 钮 的 理 








由 ! 如 果 你 是 嫌 痉 按钮 本 身 的 兼容 性 不 够 好 ， 可 以 使 用 <labe1> 元 系 模 
拟 ， 使 用 for 属 性 进行 关联 。 例 如 : 


<input id="submit" type="submit"> 
<label class="button"” for="submit"> 提 交 </1label> 
[type="submit"] { 

position: absolute; 

clip: rect(60 60 0 08); 


.button { 
/* 按钮 样式 ... */ 


} 
/* focus 轮 廓 转移 */ 
:focus + .button { 
outline: 1px dotted HighLight; 
outline: 5px auto -webkit-focus-ring-color; 


} 





使 用 <label> 元 系 模 拟 按 钮 的 效果 既 保 留 了 语义 和 原生 行为 ， 视 觉 
上 又 完美 兼容 。 


2. 模拟 表单 元 素 的 键盘 可 访问 性 


[type="radio"]、[type="checkbox"]、[type="range"] 类 型 
的 <input> 元 素 的 UI 往往 不 符合 网 站 的 设计 风格 ， 需 要 自 定 义 ， 常 规 实 
现 一 般 都 没 问 题 ， 关 键 是 很 多 开发 者 会 万 了 键盘 的 无 障碍 访问 。 


以 [type="checkbox"] 复 选 框 为 例 : 


<input id="checkbox" type="checkbox"> 














<label class="checkbox" for="checkbox"> 提 交 </1label> 





我 们 需要 隐藏 原生 的 [type="checkbox"] 多 选 框 ， 使 用 关联 的 


<label> 元 素 目 定义 的 复 选 框 样式 。 


关键 CSS 如 下 : 


[type="checkbox"] { 
position: absolute; 
clip: rect(60 60 0 98); 


} 
.Checkbox { 


border: 1px solid gray; 








} 

/* focus 时 记得 高 亮 显示 上 自 定 义 输入 框 

:focus + .checkbox { 
border-color: skyblue; 


} 








这 类 目 定 义 实 现 有 两 个 关键 点 。 








(1) 原始 复 选 框 元 素 的 隐藏 ， 要 么 设置 透明 度 opacity:6 隐 藏 ， 


Es 


要 么 剪裁 隐 藏 ， 干 万 不 要 使 用 visibility:hidden 或 者 display :none 


进行 隐藏 ， 虽 然 IE9 及 以 上 版 本 的 浏览 器 的 功能 是 正常 的 ， 但 是 这 两 种 
隐藏 是 无 法 被 键盘 聚焦 的 ， 键 盘 的 可 访问 性 为 0。 














(2) 不 要 未 记 在 原始 复 选 框 聚 焦 的 时 候 高 亮 显 示 目 定义 的 输入 框 
元 素 ， 可 以 是 边框 高 壳 ， 或 者 外 发 兴 也 行 。 通 间 都 是 使 用 相 邻 兄弟 选择 
和 从 (+) 实现， 特殊 情况 也 可 以 使 用 兄 第 选择 符 “~) ， 如 高 渤 多 个 元 素 
时 。 








市 面 上 有 不 少 UI 框 架 ， 如 何 区 分 品质 ? 很 简单 ， 使 用 Tab 键 索引 页 
面 元 素 ， 如 果 输 入 框 有 高 完 ， 则 这 个 UI 框架 比较 专业 ， 如 果 什 么 反应 都 
没有 ， 建 议 换 妨 一 种 框 染 。 


3. 容易 忽略 的 鼠标 经 过 行为 的 键盘 可 访问 性 





键盘 可 访问 性 在 7.1.3 节 介绍 :hover 伪 类 的 时 候 提 过 ， 需 要 同时 设 
置 :focus 伪 类 来 提高 键盘 的 可 访问 性 ， 如 图 7-5 所 示 。 


亩 


图 7-5 ”设置 :focus 伪 类 增强 键盘 的 可 访问 性 














这 里 再 介绍 力 外 一 种 非常 容易 被 忽略 的 影响 用 户 体 验 的 交互 实现 。 


为 了 版 面 的 整洁 ， 列 表 中 的 操作 按钮 默认 会 隐藏 ， 当 鼠标 经 过 列表 
的 时 候 才 显示 ， 如 图 7-6 所 示 。 


栏目 1 栏目 2 
栏目 1 ER2 \ | 型 除 | 
栏目 1 栏目 2 





图 7-6 鼠标 经 过 显示 列表 按钮 


很 多 人 在 实现 的 时 候 并 没有 考虑 很 多 ， 直 接 使 用 display :none 隐 
藏 或 者 visibility:hidden 隐 藏 ， 结 果 导 致 无 法 通过 键盘 让 隐藏 的 控 
件 元 素 显 示 ， 因 为 这 两 种 隐藏 方式 会 让 元 素 无 法 被 聚焦 ， 那 该 怎么 办 
呢 ? 可 以 试 试 使 用 opacity《〈 透 明度 ) 控制 内 容 的 显 隐 ， 这 样 就 可 以 通 
过 :focus 伪 类 让 按钮 在 被 键盘 聚焦 的 时 候 可 见 。 例 如 : 





tr .button { 
opacity: 8; 


tr:hover .button, 


tr .button:focus { 





opacity: 1; 
} 
效果 如 图 7-7 所 示 。 
栏目 1 栏目 2 
栏目 1 栏目 2 
栏目 1 栏目 2 


图 7-7 focus 时 也 能 显示 列表 按钮 





本 示例 配 有 演示 页 面 ( 轩 面 浏览 器 访问 ) ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/ selecto7/3-2.php 杀 上 自体 验 和 学 习 。 


7.4 ”整体 焦点 盆 类 :focus-within 


整体 焦点 伪 类 :focus-within 非 党 实用 ， 且 兼容 性 不 错 ， 目 前 已 经 
可 以 在 实际 项 目 中 使 用 ， 包 括 移动 端 项 目 和 无 须 兼 容 正 浏览 器 的 桌面 端 
项 目 。 





7.4.1 :focus-within 和 :focus 伪 类 的 区 别 


CSS :focus-within 伪 类 和 :focus 伪 类 有 很 多 相似 之 处 ， 那 就 是 
伪 类 样式 的 匹配 离 不 开元 素 聚 焦 行 为 的 触发 。 区 别 在 于 :focus 伪 类 样 








式 只 有 在 当前 元 素 处 于 聚焦 状态 的 时 候 才 匹配， 而 :focus-within 伪 类 
样式 在 当前 元 素 或 者 是 当前 元 素 的 任意 子 元 素 处 于 聚焦 状态 的 时 候 都 会 
匹配 。 











举 个 例子 : 


form:focus { 
outline: solid; 


} 


表示 仪 当 <form> 处 于 聚焦 状态 的 时 候 ，<form> 元 素 的 
outline (轮廓 ) 才 会 出 现 。 
form:focus-within { 


outline: solid; 


} 








表示 <form> 元 素 自身 ， 或 者 <form> 内 部 的 任意 子 元 素 处 于 聚焦 状 
态 时 ，<form> 元 素 的 outline( 轮 慷 ) 都 会 出 现 。 换 句 话 说， 子 元 素 聚 
焦 ， 可 以 让 父 级 元 素 的 样式 发 生变 化 。 


这 是 CSS 选 择 器 世界 中 很 了 不 起 的 革新 ， 因 为 :focus-within 伪 类 
的 行为 本 质 上 是 一 种 “ 父 选择 器 ”行为 ， 子 元 素 的 状态 会 影响 父 元 素 的 样 
式 。 由 于 这 种 “ 父 选 择 器 ”行为 需要 借助 用 户 的 行为 触发 ， 属 于 “后 泻 
染 ”， 不 会 与 现 有 的 演 染 机 制 相互 冲突 ， 因 此 浏览 器 在 规范 出 现 后 不 久 
就 快速 支持 了 。 








7.4.2 :focus-wWithin 实 现 无 障碍 访问 的 下 拉 列 
表 


:focus-within 伪 类 非常 实用 ， 一 方面 它 可 以 用 在 表单 控件 元 素 上 
(无 论 是 样式 自 定义 还 是 交互 布局 ) 。 例 如 输入 框 聚焦 时 高 亮 显 示 前 面 
的 摘 述 文字 ， 我 们 可 以 不 用 把 摘 述 文字 放 在 输入 框 的 后 面 〈 具 体 见 4.4.3 
节 中 的 示例 ) ， 正 常 的 DOM 顺 序 即 可 : 














<div class="cs-normal"> 
<label class="cs-label"> 用 户 名 : </label><input class="cs-input"> 
</divy> 




















.Cs-normal:focus-within .cs-label { 
color: darkblue; 
text-shadow: 6 6 1px; 





} 
效果 如 图 7-8 所 示 。 
用 户 名 : 
用 户 名 : | | 


图 7-8 输入 框 育 焦 ， 前 面 的 文字 被 高 亮 显 示 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/7/4-1.php 或 扫描 
下 面 的 二 维 码 杀 自 体验 与 学 习 。 








男 一 方面 ， 它 可 以 用 于 实现 完全 无 障碍 访问 的 下 拉 列 表 ， 即 使 下 拉 
列表 中 有 其 他 链接 或 按钮 也 能 正常 访问 。 例 如 ， 要 实现 一 个 类 似 图 7-9 
所 示 的 下 拉 效 果 。 





图 7-9 带 其 他 交互 的 下 拉 列 表 效 果 示 意 


HTML 结 构 如 下 : 


<div class="cs-details"> 
<a href="javascript:" class="cs-summary"> 我 的 消息 </a> 
<div class="cs-datalist"> 
xa href> 我 的 回答 <sup>12</sup></a> 








xa href> 我 的 私信 </a> 
<a href> 未 评价 订单 <sup>2</sup></a> 
xa href> 我 的 关注 </a> 
</div> 
</divy> 








我 们 在 父 元 素 .cs-details 上 使 用 :focus-within 伪 类 来 控制 下 拉 
列表 的 显示 和 隐藏 ， 如 下 : 











.CS-datalist { 
display: none; 
position: absolute; 
border: 1px solid #ddd; 
background-color: #fff; 

} 

/* 下 拉 展 开 */ 


.Cs-details:focus-within .cs-datalist { 





display: block; 
} 


本 例 中 共有 5 个 <a> 元 素 ， 其 中 一 个 用 于 触发 下 拉 显 示 的 .cs- 
summary 元 素 ， 另 外 4 个 在 下 拉 列 表 中 。 


无 论点 击 这 5 个 <a> 元 素 中 的 哪 一 个 ， 都 会 触发 父 元 素 .cs-details 
设置 的 :focus-within 伪 类 样式 ， 因 此 可 以 让 下 拉 列 表 一 直 保 持 显 示 状 
态 ; 点 击 页 面 任意 空白 ,下拉 自动 隐藏 ， 效 果 非 常 完 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/7/4-2.php 或 扫描 
下 面 的 二 维 码 亲自 体验 与 学 习 。 











我 可 以 这 么 肯定 ， 以 后 ， 对 于 这 类 下 拉 交 互 ， 采用 :focus-within 
伪 类 实现 会 是 约定 俗 成 的 标准 解决 方案 。 





7.5 ”键盘 焦点 伪 类 :focus-visible 


:focus-visible 伪 类 是 一 个 非常 年 轻 的 伪 类 ， 在 我 写本 书 的 时 候 
仅 Chrome 浏 览 器 标准 支持 ， 但 足 矣 。 深 入 用 户 体验 的 开发 者 会 觉得 这 
个 伪 类 实在 是 太 有 用 了 。 





:focus-Vvisible 把 我 感动 旺 了 





:focus-visib1le 伪 类 匹配 的 场景 是 :元素 聚焦 ， 同 时 浏览 器 认为 


聚焦 轮廓 应 该 显示 。 





是 不 是 很 抛 口 ? 规范 就 是 这 么 定义 的 。:focus-visible 的 规范 并 
没有 强行 约束 匹配 逻辑 ， 而 是 交 给 了 UA “〈 也 就 是 浏览 器 ) 。 我 们 将 通 
过 真实 的 案例 来 解释 下 这 个 伪 类 是 做 什么 用 的 。 


轮廓 的 ， 但 是 使 用 键盘 访问 的 时 候 会 出 现 ， 这 是 非常 符合 预期 的 体验 。 
但 是 在 Chrome 浏 览 嚣 下， 有 一 些 特殊 场景 并 不 是 这 么 表现 的 : 


。 设置 了 背景 的 <button> 按 钮 ; 
。HTML5 中 的 <summary> 元 素 ; 
。 设 置 了 HTML tabindex 属 性 的 元 素 ; 


在 Chrome 浏 览 器 下 点 击 鼠 标的 时 候 ， 以 上 3 个 场景 也 会 出 现 明 显 的 
焦点 轮廓 ， 如 图 7-10 所 示 。 
点 击 目 现 企 点 范 府 
2. ee summary 元 素 
3， 我 星 设 置 了 tabindex="0” 的 普通 div 元 


图 7-10 鼠标 点 击 设置 了 tabindex 属 性 的 元 素 时 出 现 焦 点 轮 序 


这 其 实 是 我 们 并 不 希望 看 到 的 ， 在 点 击 鼠 标的 时 候 轮 廓 不 应 该 出 现 
《没有 高 之 的 必要 ) ， 但 是 在 我 们 使 用 键盘 访问 的 时 候 需 要 出 现 ( 让 用 
户 知道 当前 聚焦 元 妹 ) ，Firefox 浏 览 右 以 及 下 浏览 器 的 表现 均 符 合 我 们 
的 期 望 ， 点 击 访问 时 无 轮廓 ， 键 盘 访 问 时 才 会 出 现 ，Safari 浏 览 右 按钮 
的 表现 符合 期 望 。 


但 是 ， 又 不 能 简 简单 单 地 设置 outline:none 来 处 理 ， 因 为 这 样 会 
把 使 用 键盘 访问 时 应 当 出 现 的 焦点 轮廓 给 隐藏 掉 ， 从 而 带 来 严重 的 无 障 


人 碍 访问 问题 。 





为 了 兼顾 视觉 体验 和 键盘 无 障碍 访问 ， 我 之 前 的 做 法 是 使 用 
JavaScript 进 行 判断 ， 如 果 元 素 的 :focus 触 发 是 键盘 访问 触发 ， 就 给 元 
素 添 加 自 定义 的 outline 轮 廊 ， 否 则 ， 去 除 outline， 这 样 做 成 本 颇 


A 
[= 
Do 


现在 有 了 :focus-visible 伪 类 ， 所 有 问题 迎刃而解 ， 在 目前 版 本 
的 Chrome 浏 览 右 下 ， 浏 览 右 认为 使 用 键盘 访问 时 触发 的 元 素 聚 焦 才 
是 :focus-visible 所 表示 的 聚焦 。 换 句 话说 ，:focus-visible 可 以 
让 我 们 知道 元 素 的 聚焦 行为 到 底 是 鼠标 触发 还 是 键盘 触发 。 因 此 ， 如 果 
希望 去 除 鼠 标点 击 时 候 的 outline， 而 保留 键盘 访问 时 候 的 outline， 
只 要 一 条 短 短 的 CSS 规 则 就 可 以 了 : 








:focus:not(:focus-visible) { 


outline: 6; 





这 样 ，Chrome 浏 览 器 下 让 人 头疼 的 轮廓 问题 束 得 到 了 解决 。 


眼见 为 实 ， 读 者 可 以 手动 输入 https://demo.cssworld.cn/selector/7/5- 
1.php 或 扫描 下 面 的 二 维 码 亲自 体验 与 学 习 。 





此 时 ， 我 们 点 击 设置 了 tabindex 属 性 的 <div> 元 素 将 不 会 出 现 轮 
廊 ， 如 图 7-11 所 示 。 





1. 。 按钮 点 击 没有 皇 点 轮 鹿 


2. ee summary 元 素 a 


3， 我 是 设置 了 fabindex="0” 的 普通 div 元 





图 7-11 鼠标 点 击 设置 了 tabindex 属 性 的 元 素 将 不 会 出 现 轮廓 


但 是 ， 如 果 我 们 使 用 键盘 访问 ， 例 如 按 下 Tab 键 进行 索引 ， 轮 廓 依 
然 存 在 ， 如 图 7-12 所 示 。 


1. 计时 键盘 访问 们 其 有 轮 启 


2. pe summary 元 素 A 


3. 戈 是 设置 了 tabindex="0” 的 普通 div 元 
袁 。 








图 7-12 ”使 用 键盘 访问 设置 了 tabindex 属 性 的 元 素 时 依然 出 现 了 轮廓 








完美 ， 感 动 ! 


本 章 主要 介绍 与 浏览 器 地 址 栏 中 地 址 相关 的 一 些 伪 类 ， 其 中 CSS 选 
择 器 规范 中 的 :local- 1ink 伪 类 (基于 域名 匹配 ) 目前 没有 任何 浏览 
嚣 支持， 也 看 不 到 日 后 会 得 到 支持 的 迹象 ， 因 此 本 书 不 做 介 





8.1 链接 历史 伪 类 :1ink 和 :visited 
本 节 将 介绍 两 个 与 链接 地 址 访问 历史 有 关 的 盆 类 ， 其 中 的 细节 惊人 
得 多 。 


8.1.1 深入 理解 :Link 


:1ink 伪 类 历史 悠久 ， 但 如 今 开 发 实际 项 目的 时 候 ， 很 少 使 用 这 个 
伪 类 ， 为 什么 昵 ? 这 里 带 大 家 深入 :Link 伪 类 的 细节 ， 你 就 知道 原因 
J 

:link 伪 类 用 来 匹配 页 面 上 href 链 接 没 有 访问 过 的 <a> 元 素 。 

因此 ， 我 们 可 以 用 :1link 伪 类 来 定义 链接 的 默认 颜色 为 天 蓝 色 : 


a:link { 
color: skyblue; 


} 





乍 一 看 这 个 定义 没什么 问题 ， 但 实际 上 有 丝 漏 ， 那 就 是 如 打 链 接 已 
经 被 访问 过 ， 那 <a> 元 素 的 文字 颜色 又 该 是 什么 呢 ? 结果 是 系统 默认 的 
链接 色 。 这 也 就 意味 着 ， 使 用 :1ink 伪 类 必须 指定 已 经 访问 过 的 链接 的 
颜色 ， 通 常 使 用 :visited 伪 类 进行 设置 。 例 如 : 


a:visited { color: lightskyblue; } 


也 可 以 直接 使 用 a 标签 选择 器 ， 但 不 推荐 这 么 用 ， 因 为 这 一 点 也 不 





加 上 链接 通常 会 设置 :hover 伪 类 ， 使 得 鼠标 经 过 的 时 候 变 色 ， 这 
就 出 现 了 优先 级 的 问题 。 大 家 都 是 伪 类 ， 和 平起平坐 ， 如 果 把 表示 默认 状 
态 的 伪 类 放 在 最 后 ， 必 然 会 导致 其 他 状态 的 样式 无 法 生效 ， 

此 ，:1link 伪 类 一 定 要 放 在 最 前 面 。 这 里 不 得 不 提 一 下 车 名 的 “love-hate 
顺序 ”，:1Link>:visited>:hover>:active， 首 字母 连 起 来 是 LVHA， 
取 自 love-hate， 爱 恨 情 仇 ， 很 好 记忆 。 








如 果 记 不 住 也 没关系 ， 还 有 其 他 方法 可 以 不 需要 记忆 这 几 个 伪 类 的 
顺序 。HTML 中 有 3 种 链接 元 素 ， 可 以 原生 支持 href 属 性 ， 分 另 
是 ca>、<1link> 和 <area>， 但 :link 伪 类 只 能 匹配 <a> 元 素 ， 因 此 ， 实 
际 开发 可 以 直接 写作 : 


:link { color: skyblue; } 


这 样 ， 就 算 :1ink 伪 类 放 在 最 后 面 ， 也 不 用 担心 优先 级 的 问题 : 








二 








a:visited { color: lightskyblue; } 


a:hover { color: deepskyblue; } 
:link { color: skyblue; } 





下 面 该 说 说 :link 伪 类 落 览 的 原因 了 ， 归 根 结 确 束 是 苋 搜 不 过 a 标 
签 选择 右 。 例 如 : 


CSS 开 发 者 一 看 ， 喷 ? 和 使 用 :1ink 伪 类 效果 一 样 啊 ， 而 且 
比 :1ink 伪 类 更 好 用 。 








如 果 网 站 需要 标记 已 访问 的 链接 ， 再 设置 一 下 :visited 伪 类 样式 
即 可 ， 如 下 : 


a { color: skyblue; } 


a:visited { color: lightskyblue; } 














如 果 网 站 不 需要 标记 已 访问 的 链接 ， 则 不 需要 再 写 任何 多 余 的 代码 
进行 处 理 ， 这 不 仅 节 约 了 代码 ， 而 且 还 更 容错 ， 比 :1ink 伪 类 好 用 多 
了 了。 








于 和 是， 和 久而久之， 大 家 也 都 约定 众 成 ， 使 用 优先 级 极 低 的 a 标 签 选 
择 器 设置 默认 链接 颜色 ， 如 果 有 其 他 状态 需要 处 理 ， 再 使 用 伪 类 。 


当然 ， 凡 事 都 有 两 面 性 ，:1ink 伪 类 沦 为 鸡肋 后 ， 大 家 已 经 不 知 
道 :1ink 伪 类 与 a 标签 选择 占 相 比 还 是 有 优势 的 ， 那 就 是 :1ink 伪 类 可 以 
识别 真 链接 。 这 是 什么 意思 呢 ? 例 如 ， 一 些 HTML: 


xa href> 链 接 </a> 





<a name="example"> 非 链接 </a> 


其 中 <a name="example"></a> 并 不 是 一 个 链接 元 素 ， 因 为 其 中 没 
有 href 属 性 ， 点 击 将 无 反应 ， 也 无 法 啊 应 键盘 访问 。 因 此 ， 这 段 HTML 
对 应 的 文字 颜色 就 不 能 是 链接 颜色 ， 而 应 该 是 普通 的 文本 颜色 。 此 时 a 
标签 选择 器 的 问题 就 出 现 了 ， 它 会 让 不 是 链接 的 <a> 元 素 也 呈现 为 链接 
色 ， 而 :1ink 伪 类 就 不 会 出 现 此 问题 ， 它 只 会 匹配 <a href></a> 这 段 
HTML 元素 。 











从 这 一 点 来 看 ，:1ink 伪 类 更 合适 ， 也 更 规范 。 例 如 我 很 喜欢 移 
除 href 属 性 来 表示 <a> 元 素 按 钮 的 禁用 状态 ， 如 果 使 用 :1ink 伪 类 ， 那 
按钮 的 禁用 和 非 禁 用 的 CSS 束 更 好 控制 了 。 








但 是 ，a:1ink 带 来 的 混乱 要 比 收益 高 得 多 ， 而 且 也 有 更 容易 理解 
的 替代 方法 来 区 分 <a> 元 素 的 链接 性 质 ， 那 就 是 直接 使 用 属性 选择 器 代 
蔡 a 标 签 选择 器 : 


[href] { color: skyblue; } 


区 分 <a> 元 素 按 钮 是 否 蔡 用 可 以 用 下 面 的 方法 : 


.Cs-button:not([href]) { opacity: .6; } 


对 于 :1ink 伪 类 ， 就 让 它 沉寂 下 去 吧 。 





8.1.2 ”怪癖 最 多 的 CSS 伪 类 :visited 


CSS 伪 类 :visited 是 怪癖 最 多 的 伪 类 ， 这 些 怪 辛 设计 的 原因 都 是 出 
于 安全 考虑 。 接 下 来 我 们 将 深入 这 些 怪癖 ， 好 好 了 解 一 下 :visited 伪 
类 诸多 有 趣 的 特性 。 





1. 文 持 的 CSS 属 性 有 限 





:visited 伪 类 选择 器 支持 的 CSS 很 有 限 ， 目 前 仅 支 持 下 面 这 些 
CSS: color, background-color, border-color, border- 
bottom-color, border-left-color, border-right- 
color, border-top-color, column-rule-color 和 outline- 


color。 


类 似 : :before 和 ::after 这 些 伪 元 素 则 不 支持 。 例 如 ， 我 们 希望 
使 用 文字 标示 已 经 访问 过 的 链接 ， 如 下 : 








/* 注意 ， 不 文 持 */ 


a:visited::after { content: 'visited'; } 








很 遗憾 ， 想 法 虽 好 ， 但 没有 任何 浏览 露 会 文 持 ， 请 死 了 这 条 心 吧 ! 





不 过 好 在 :visited 伪 类 支持 子 选择 器 ， 但 它 所 能 控制 的 CSS 属 性 
和 :visited 一 模 一 样 ， 即 那 几 个 和 颜色 相关 的 CSS 属 性 ， 也 不 文 
持 : :before 和 : :after 这 些 伪 元 素 。 


例如 : 


a:visited span{color: lightskyblue;} 





<a href=""> 文 字 <span>visited</span></a> 


如 果 链 接 是 浏览 器 访问 过 的 ， 则 <span> 元 素 的 文字 颜色 就 会 是 淡 
天 蓝 色 ， 如 图 8-1 所 示 。 


立 字 











图 8-1 'visited' 文 字 变 为 淡 天 蓝 色 








于 是 ， 我 们 就 可 以 通过 下 面 这 种 方法 实现 在 访问 过 的 链接 文字 后 面 
加 上 一 个 visited 字 样 。HTML 如 下 : 


<a href=""> 文 字 <small></small></a> 


CSS 如 下 : 





small { position: absolute; color: white; } /* 这 里 设置 color: transparent 无 


效 */ 


small::after { content: 'visited'; } 
a:visited small { color: lightskyblue; } 





效果 如 图 8-2 所 示 。 
史 宇 


图 8-2 ”在 文字 后 面 显 示 '"visited ' 字 样 




















2. 没有 半 透 明 


使 用 :visited 伪 类 选择 器 控制 颜色 时 ， 虽 然 在 语法 上 它 支持 半 透 
明 色 ， 但 是 在 表现 上 ， 则 要 么 纯色 ， 要 么 全 透明 。 


例如 : 


a { color: blue; } 
a:visited { color: rgba(255,0,9,.3); } 


结果 不 是 半 透 明 红 色 ， 而 是 纯 红色 ， 完 全 不 透明 ， 如 图 8-3 所 示 。 


-一 Color: 国 rgba(255,0,0, .3); 


color: 国 blue; 





请 问 : 对 于 下 面 这 段 CSS， 访 问 过 的 <a> 元 素 有 背景 色 吗 ? 


a { color: blue; } 


a:visited { color: red; background-color: gray; } 





HTMIL 为 : 


<a href> 有 背景 色 吗 ? </a> 








六 








答案 是 不 会 有 背景 色 ， 如 图 8-4 所 示 。 


有 背 量 色 吗 ? [rR | Elements 


Console Sources Netw 
/ 
' 


Styles Computed Event Liste 
html lang="enN” > ————— 
bp <head 


-<yhead> | Filter 


v<body 


= element.style { 

<a href> 有 有 } 

景色 吗 ? </a> 

a:visited { 

color: 国 red; 
background-color: 国 gray; 





庶 包 蕴 景 并 未 星 示 ! 


color: 国 blue; 


图 8-4 没有 显示 背景 色 
为 :visited 伪 类 选择 器 中 的 色 值 只 能 重 置 ， 不 能 


\ 能 凭空 设置 。 我 
们 将 前 面 的 CSS 修 改 成 下 面 的 CSS 就 可 以 了 : 


a { color: blue; background-color: white; } 
a:visited { color: 





red; background-color: gray; } 


此 时 文字 的 背景 


月 页 


束 很 神奇 地 显现 出 来 了 了 ， 如 图 8-5 所 示 。 








有 背 量 色 吗 全 [x | Elements Console Sources Networ 
Styles Computed Event Listen 
pa html lang="en' 
bp <head>..</head> Filter 
v <body element .style { 
< href> 有 有 } 
景色 吗 ? </ay> 
a:visited { 
color: 国 red; 
background-color: 国 gray; 
灰色 上 痛 景 显示 ! 


， 
color: 图 blue; 


background-color: white; 
T 
J 


图 8-5 ”灰色 背景 色 显 


涌 景 色 显 现 
也 就 是 说 ， 默 认 需 要 有 一 个 背景 


景色 ， 这 样 我 们 的 链接 元 素 在 匹 
配 :visited 的 时 候 才 会 有 背景 色 呈 现 。 








4. 无 法 获取 :visited 设 置 和 呈现 的 色 值 
当 文 字 颜 色 值 表现 为 :visited 选 择 器 设置 的 颜色 值 时 ， 我 们 使 用 


JavaScript 的 getComputedSstyle() 方 法 将 无 法 获取 到 这 个 颜色 值 。 


己 知 CSS 如 下 : 


a { color: blue; } 
a:visited { color: red; } 


我 们 的 链接 表现 为 红色 ， 此 时 运行 下 面 的 JavaScript 代 码 : 


window.getComputedstyle(document .1Links[6]).color; 


结果 输出 "rgb(8,8,255)"， 也 就 是 蓝 色 〈blue) 对 应 的 RGB 人 色 
值 ， 如 图 8-6 所 示 。 











[ | Elements Console Sources Network 
»] © | top MW t 














window.getComputedStyle(document.1inks[8]).color; 


图 8-6 ”获取 的 色 值 是 蓝 色 ， 而 非 呈 现 的 红色 











8.2” 超 链接 伪 类 :any-1link 


本 节 将 介绍 一 个 后 起 之 秀一 一 伪 类 :any-1link。:any-link 伪 类 
与 :link 伪 类 有 很 多 相似 之 处 ， 但 比 :1ink 这 种 鸡肋 伪 类 要 实用 得 多 ， 
说 它 完全 弥补 了 :1ink 伪 类 的 缺点 也 不 为 过 。 


:any-1link 相 比 :1ink 的 优点 是 什么 





大 家 应 该 还 记得 ， 前 面 说 过 的 :1ink 伪 类 的 两 大 缺点 : 一 是 能 设置 
未 访问 过 的 元 素 的 样式 ， 对 已 经 访问 过 的 元 素 完全 无 效 ， 已 经 访问 过 的 
元 素 还 需要 额外 的 CSS 设 置 ; 二 是 只 能 作用 于 <a> 元 素 ， 和 标签 选择 器 a 
看 起 来 没 差别 ， 完 全 元 争 不 过 更 简单 有 效 的 标签 选择 器 a， 因 而 沦 为 鸡 
肋 伪 类 。 


正 是 因为 :link 仿 类 存在 这 些 不 足 ， 所 以 W3C 官 方才 推出 了 新 
的 :any-link 伪 类 ，:any- link 伪 类 的 实用 性 就 完全 发 生 了 变化 。 





:any-1link 伪 类 有 如 下 两 大 特性 。 


。 几 配 所 有 设置 了 href 属 性 的 链接 元 素 ， 包 括 <ca>、<1ink> 和 
<area> 这 3 种 元 素 ; 

。 风 配 所 有 [匹配 :1ink 伪 类 或 者 :visited 伪 类 的 元 素 。 
我 称 之 为 “ 真 :链接 盆 类 ”。 


下 面 我 们 通过 一 个 示例 来 直观 地 了 解 一 下 :any-link 伪 类 。HTML 
和 CSS 代 码 如 下 : 





<a href="//www.cssworld.cn?r=any-link"> 没 有 访问 过 的 链接 </a><br> 
<a href> 访 问 过 的 链接 </a><br> 





<a> 没 有 设置 href 属 性 的 a 元 素 </a> 


a:any-link { color: white; background-color: deepskyblue; } 





结果 如 图 8-7 所 示 。 


生态 | 有 让 
万 旧 | 车 昌 ] 谤 拉 四 
入 有 设置 href 属 性 的 a 元 素 
图 8-7 :any-1ink 伪 类 匹配 了 访问 和 没有 访问 过 的 链接 
我 们 可 以 对 比 同样 的 HTML 代 人 码 下 :1ink 伪 类 的 呈现 效果 : 


a:link { 
color: white; 


background-color: deepskyblue; 


} 





结果 如 图 8-8 所 示 蔬 。 


访问 过 的 链接 毅 色 


各 有 访 旧 过 的 链接 统 默 认 色 
pr 入 统 
没有 设置 href 属 性 的 a 元 素 


图 8-8 :1ink 伪 类 仅 匹 配 了 未 访问 过 的 链接 元 素 


对 比 图 8-7 和 图 8-8， 可 以 很 容易 看 出 :any-1ink 仿 类 的 优点 : 与 a 标 
签 选择 右 相 比 ，:any-1link 伪 类 可 以 更 加 准确 地 识别 链接 元 素 ; 
与 :link 伪 类 相 比 ， 使 用 :any-1link 伪 类 无 须 担 心 :visited 伪 类 对 样式 
的 干扰 ， 它 是 真正 意义 上 的 链接 伪 类 。 


实际 开发 项 目 时 ， 因 为 我 们 很 少 使 用 <area> 元 素 ，《Link> 元 素 默 
认 display:none， 所 以 我 们 可 以 直接 使 用 伪 类 作为 选择 器 : 





:any-link { 
color: skyblue; 


:any-link:hover { 


color: deepskyblue; 
} 


兼容 性 


正 浏览 右 并 不 文 持 :any-1ink 伪 类 ， 但 其 他 浏览 右 的 文 持 恨 好 ， 
此 ， 移 动 端 或 者 其 他 不 需要 兼容 正 浏览 器 的 项 目 都 可 以 放心 使 用 :any- 


link 伪 类 。 


8.3 目标 伪 类 :target 


:target 是 IE9 及 以 上 版 本 的 浏览 器 全 部 文 持 的 且 已 经 文 持 了 很 多 
年 的 一 个 CSS 伪 类 ， 它 是 一 个 与 URL 地 址 中 的 锚 点 定位 强 关 联 的 伪 类 ， 
可 以 用 来 实现 很 多 原本 需要 JavaScript 才 能 实现 的 交互 效果 。 





8.3.1 :target 与 销 点 


假设 浏览 右 地 址 栏 中 的 地 址 如 下 : 


https://www.cssworld.cn/#cs-anchor 


则 #cs-anchor 束 是 “ 销 点 >”， 术 语 名 称 是 哈 希 (hash 的 音译 ) ， 即 


JavaScript 中 location.hash 的 返回 值 。 





URL 锚 点 可 以 和 页 面 中 id 匹配 的 元 素 进 行销 定 ， 浏 览 器 的 默认 行为 
是 触发 滚动 定位 ， 同 时 进行 :target 伪 类 匹配 。 


举 个 例子 ， 假 设 页 面 有 如 下 HTML: 


<Ul> 
<1i id="cs-first"> 第 1 行 ，id 是 cs-first</1i> 








<1i id="cs-anchor"> 第 2 行 ，id 是 cs-anchor</1i> 
<1i id="cs-last"> 第 3 行 ，id 是 cs-last</1i> 
</ul> 





以 及 如 下 CSS: 


li:target { 
font-weight: bold; 


color: skyblue; 





则 呈现 的 效果 如 图 8-9 所 示 ， 第 二 行列 表 的 颜色 为 天 蓝 色 ， 同 时 文 
字 加 粗 显示 。 
s 审 1 行 ，id 是 cs-first 
。 昌 结 ，id 星 cs-last 


图 8-9 :target 伪 类 的 基本 效果 





这 就 是 :target 伪 类 的 作用 一 一 匹配 UREL 锚 点 对 应 的 元 素 。 


部 分 浏览 器 (如 IE 浏 览 器 和 Firefox 浏 览 器 ) 下 ，<a> 元 素 的 name 属 
性 值 等 同 于 锚 点 值 时 ， 也 会 触发 浏览 器 的 滚动 定位 。 例 如 : 





<a name="cs-anchor">a 元 素 ，name 是 cs-anchor</a> 








这 种 用 法 是 否 可 以 匹配 :target 伪 类 呢 ? 根据 目前 的 测试 ， 仅 
Firefox 浏 览 器 可 以 匹配 ， 如 果 同 时 有 其 他 id 属性 值 等 同 于 锚 点 值 的 元 
素 ， 例 如 : 


<a name="cs-anchor">a 元 素 ，name 是 cs-anchor</a> 
<Ul> 
<1i id="cs-first"> 第 1 行 ，id 是 cs-first</1i> 








<1i id="cs-anchor"> 第 2 行 ，id 是 cs-anchor</1i> 
<1i id="cs-last"> 第 3 行 ，id 是 cs-last</1i> 
</U1L> 





则 浏览 器 会 优先 且 唯 一 匹配 1i#cs-anchor 元 素 ，a[name="cs- 
anchor"] 元 系 被 忽略 。 


总 而 言 之 ， 由 于 兼容 性 等 原因 ， 不 推荐 使 用 <a> 元 系 加 name 属 性 值 
进行 锚 点 匹配 。 


如 果 页 面 有 多 个 元 素 使 用 同一 个 id， 则 :target 只 会 匹配 第 一 个 元 
素 。 例 如 : 





cs-first"> 第 1 行 ，id 是 cs-first</1i> 
"cs-anchor"> 第 2 行 ，id 是 cs-anchor</1i> 


"cs-last"> 第 3 行 ，id 是 cs-last</1i> 
cs-anchor"> 第 4 行 ，id 同 样 是 cs-anchor</1i> 

















则 呈现 效果 如 图 8-10 所 示 ， 仅 第 2 行列 表 文 字 加 粗 变色 ， 第 4 行文 字 
没有 任何 变化 。 


。 第 1 行 ，id 是 cs-first 


第 3 行 ， id 是 cs-last 
。 第 4 行 ，id 同 样 星 cs-anchor 


图 8-10 :target 伪 类 仅 匹 配 第 一 个 元 素 


然而 ， 正 浏览 器 却 不 走 寻常 路 ， 第 2 行 和 第 4 行 的 <1i> 元 素 全 匹配 
了 ， 如 图 8-11 所 示 。 
。 第 1 行 ，id 星 cs-first 


。 第 3 行 ，id 是 cs-last 
图 8-11 下 浏览 器 下 :target 伪 类 匹配 全 部 元 素 


因此 ， 一 定 不 要 使 用 重复 的 id 值 ， 这 既 会 造成 不 兼容 ， 也 不 符合 语 
义 。 如 果 你 想 借 助 :target 伪 类 匹配 多 个 元 素 ， 请 借助 CSS 选 择 符 实 
现 ， 例 如 父子 选择 符 或 者 兄弟 选择 符 等 。 


当 我 们 使 用 JavaScript 改 变 URL 销 点 值 的 时 候 ， 也 会 触及 :target 伪 
类 对 元 素 的 匹配 。 例 如 ， 执 行 如 下 JavaScript 人 代码， 页 面 中 对 应 的 #cs- 
anchor 元 素 就 会 匹配 :target 伪 类 并 产生 定位 效果 : 


location.hash = 'cs-anchor'; 


如 果 匹 配 锚 点 的 元 素 是 display:none， 则 所 有 浏览 器 不 会 触发 任 
何 深 动 ， 但 是 display :none 元 素 依然 匹配 :target 伪 类 。 例 如 : 








<U]> 
<1i id="cs-first"> 第 1 行 ，id 是 cs-first</1i> 
<1i id="cs-anchor" hidden> 第 2 行 ，id 是 cs-anchor</1i> 
<1i id="cs-last"> 第 3 行 ，id 是 cs-last</1i> 
</ul> 
:target + li { 
font-weight: bold; 
color: skyblue; 


} 














则 第 3 行文 字 将 表现 为 天 蓝 色 同时 被 加 粗 ， 如 图 8-12 所 示 。 


。 第 1 行 ，id 是 cs-first 


图 8-12 display:none 元 素 依然 匹配 :target 伪 类 
千 万 不 要 小 看 这 种 行为 表现 ， 设 置 元 素 display :none 同 时 进 


行 :target 伪 类 [匹配 是 我 所 知道 的 实现 诸多 交互 效果 同时 保证 良好 体验 
唯一 有 效 的 手段 ， 具 体 参见 下 一 节 内 容 。 








8.3.2 :target 交互 布 局 技术 简介 





:target 不 仅 可 以 标记 销 点 销 定 的 元 素 ， 还 可 以 用 来 实现 很 多 原本 
需要 JavaScript 才 能 实现 的 效果 。 








这 里 要 介绍 的 这 种 技术 实现 不 会 有 页 面 跳 动 ( 深 动 重 定位 〉 的 问 
题 ， 可 以 直接 落地 实际 开发 。 


1， 展 开 与 收 起 效果 











例如 ， 一 篇 文章 只 显示 了 部 分 内 容 ， 需 要 点 击 “ 哆 读 更 多 ” 才 显 示 剩 
余 内 容 ，HTML 如下: 














文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 ee 

<div id="articleMore" hidden></div> 

<a href="#articleMore" class="cs-button" data-open="true"> 阅 读 更 多 </a> 

<p class="cs-more-p"> 更 多 文章 内 容 ， 更 多 文章 内 容 ， 更 多 文章 内 容 ， 更 多 文章 内 容 。</ 
p> 








<a href="##" class="cs-button" data-open="false"> 收 起 </a> 








这 里 依次 出 现 了 以 下 4 个 标签 元 素 : 


。 div#articleMore 元 素 是 一 直 隐 藏 的 锚 链 元 素 ， 用 来 匹配 :target 
伪 类 ; 

。a[data-open='"true"] 是 “阅读 更 多 ”按钮 ， 点 击 地 址 栏 中 的 URL 
地 址 ， 锚 点 值 会 变 成 #articleMore， 从 而 触发 :target 伪 类 的 匹 
配 ; 

。p.cs-more-p 是 默认 隐藏 的 更 多 的 文章 内 容 ; 

。a[data-open="false"] 是 收 起 按钮 ， 点 击 后 将 重 置 锚 点 值 ， 页 面 
的 所 有 元 素 都 不 会 匹 配 :target 伪 类 。 


相关 CSS 如 下 : 





/* 默认 “更 多 文章 内 容 ” 和 “ 收 起 ”按钮 隐藏 */ 
.CS-more-p， 
[data-open=false] { 

display: none; 


} 

/* 匹配 后 “阅读 更 多 ”按钮 隐藏 */ 

:target ~ [data-open=true] { 
display: none; 


} 
/* 匹配 后 “更 多 文章 内 容 ” 和 ” 收 起 ”按钮 显示 */ 
:target ~ .cs-more-p, 
:target ~ [data-open=false] { 
display: block; 





上 述 CSS 的 实现 原理 是 把 锚 链 元 素 放 在 最 前 面 ， 然 后 通过 兄弟 选择 
符 ~ 来 控制 对 应 元 素 的 显 隐 变化 。 








传统 实现 是 把 销 链 元 素 作 为 父 元 素 使 用 的 ， 但 这 样 做 有 一 个 严重 的 


体验 问题 ， 当 display 属 性 值 不 是 none 的 元 素 被 锚 点 匹配 的 时 候 ， 会 触 
发 浏览 器 原生 的 滚动 定位 行为 ， 而 传统 实现 方法 中 的 父 元 素 display 的 
属性 值 显然 不 是 none， 于 是 每 当 点 击 “ 阅 读 更 多 ”按钮 ， 浏 览 器 都 会 把 父 
元 素 瞬 间 滚 动 至 浏览 右 窗 口 的 顶部 ， 这 给 用 户 的 感觉 束 是 页 面 突然 跳动 
了 一 下 ， 融 来 了 很 不 好 的 体验 。 虽 然 新 的 scrol1-behavior:smooth 可 
以 优化 这 种 体验 ， 但 是 由 于 兼容 性 问题 ， 也 并 不 是 特别 好 的 方案 。 


























于 是 ， 综 合 来 看 ， 最 好 的 交互 方案 就 是 销 ae none, 
同时 把 销 链 元 素 放 在 需要 进行 样式 控制 的 DOM 结 构 的 前 面 ， 通 过 兄弟 
选择 符 进行 匹配 。 





我 们 来 看 下 上 面 例子 实现 的 效果 ， 默 认 情 况 下 如 图 8-13 所 示 。 


文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文 
章 内 容 ， 文章 内 容 ， 文章 内 容 ...... 





图 8-13 ”展开 更 多 内 容 的 默认 效果 








点 击 “ 阅 读 更 多 ”按钮 后 ， 地 址 栏 中 的 地 址 变 成 
https://demo.cssworld.cn/selector/8/3-1. phpf#articleMore， 也 就 是 URE 哈 希 
销 点 变 成 了 #articleMore， 这 时 就 会 匹配 选择 器 为 #articleMore 元 素 
设置 的 :target 伪 类 样式 ， 于 是 ， 一 些 元 素 的 显示 状态 和 隐藏 状态 就 发 
生 了 变化 ， 布 局 效果 如 图 8-14 所 示 。 
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图 8-14 ”展开 更 多 内 容 后 的 显示 效果 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/8/3-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








整个 交互 效果 实现 了 没有 任何 JavaScript 代 码 的 参与 ， 也 没有 任何 浏 
览 器 的 跳动 行为 有 发生。 这 种 实现 方法 与 第 9 重要 介绍 的 “ 单 复 选 框 元 陛 显 
隐 技 术 ” 相 比 有 一 个 巨大 的 好 处 ， 那 就 是 我 们 可 以 借助 URL 地 址 记 住 当 
前 页 面 的 交互 状态 。 








例如 ， 本 例 中 ， 当 展开 更 多 内 容 后 ， 我 们 再 刷新 页 面 ， 内 容 依然 保 
持 展开 状态 。 





移动 端 开 发 经 党 会 有 一 些 交 互 浮 层 ， 它 们 通过 :target 显 隐 技 术 实 
现 ， 我 们 无 须 借助 localStorage《〈 本 地 存储 ) 就 能 记 住 当前 页 面 的 泽 











层 显示 状态 ， 成 本 低 、 效 率 高 ， 可 以 在 项 目 中 试 试 ， 就 算 页 面 JavaScript 
运行 故障 ， 此 交互 功能 也 依旧 运行 良好 。 


类 似 的 实用 场景 还 有 很 多 ， 例 如 常见 的 选项 卡 切换 效果 ， 借 
助 :target 伪 类 实现 该 效果 时 不 仅 不 需要 JavaScript 介 入 ， 同 时 还 能 记 住 
选项 卡 的 切换 面板 ， 下 面 就 介绍 如 何 实 现 它 。 


2. 选项 卡 效果 


HTML 如 下 : 


<div class="cs-tab-x"> 
<!-- 销 链 元 素 --> 
<i id="tabPane12” class="cs-tab-anchor-2" hidden></i> 
<i id="tabPane13” class="cs-tab-anchor-3" hidden></i> 
<1-- 以 下 HTML 为 标准 选项 卡 DOM 结 构 --> 
<div class="cs-tab"> 
<a href="#tabPpanel1"” class="cs-tab-1i"> 选 项 卡 1</a> 
<a href="#tabPanel2"” class="cs-tab-1i"> 选 项 卡 2</a> 
<a href="#tabPane13"” class="cs-tab-1i"> 选 项 卡 3</ay> 
</div> 
<div class="cs-panel"> 
<div class="cs-panel-1i"> 面 板 内 容 1</div> 
<div class="cs-panel-1i"> 面 板 内 容 2</div> 
<div class="cs-panel-1i"> 面 板 内 容 3</div> 
</div> 
</div> 























锚 点 定位 选项 卡 与 普通 选项 卡 的 区 别 就 在 于 ， 在 选项 卡 元 素 的 前 面 
多 了 两 个 默认 隐藏 〈 通 过 hidden 属 性 ) 的 锚 链 元 素 ， 这 几 个 元 素 的 id 
属性 值 和 选项 卡 按钮 <a> 元 素 的 href 属 性 值 正 好 对 应 ， 以 便 点 击 按钮 可 
以 触发 :target 伪 类 匹配 。 相 关 CSS 代 码 如 下 : 








/* 默认 选项 卡 按钮 样式 */ 





.CS-tab-1i { 
display: inline-block; 
background-color: #f6fef0; 
color: #333; 
padding: 5px 16pX; 


} 
/* 选中 后 的 选项 卡 按钮 样式 */ 
.Cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-tab .cs-tab-1i:first-c 
hild, 
.Cs-tab-anchor-2:target ~ .cs-tab .cs-tab-li:nth-of-type(2), 
.Cs-tab-anchor-3:target ~ .cs-tab .cs-tab-li:nth-of-type(3) { 
background-color: deepskyblue; 
color: #fff; 











} 
/* 默认 选项 面板 样式 */ 
.CS-panel-1i { 
display: none; 
padding: 26pX; 
border: 1px solid #ccc; 
} 
/* 选中 的 选项 面板 显示 */ 
.Cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-panel .cs-panel-1i:fir 
st-child, 
.Cs-tab-anchor-2:target ~ .cs-panel .cs-panel-li:nth-of-type(2), 
.CSs-tab-anchor-3:target ~ .cs-panel .cs-panel-li:nth-of-type(3) { 
display: block; 
} 








例如 ， 点 击 “ 选 项 卡 2*?， 浏 览 右 地 址 栏 的 URL 值 是 
https://demo.cssworld.cn/selector/8/3-2. php#tabPanel2， 此 时 的 选项 卡 效 
果 如 图 8-15 所 示 。 


选项 卡 ] 启 写 my 纪 撕 选项 卡 3 


CO 


面板 内 容 2 


图 8-15 ”选中 第 二 个 选项 卡 的 效果 截图 





此 时 ， 如 宁 刷 新 页 面 ， 依 然 会 保持 第 二 个 选项 卡 显示 ， 这 表明 系统 


目 动 记 住 了 用 户 之 前 的 选择 。 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/8/3-2.php 或 扫描 
下 面 的 二 维 码 杀 自 体验 与 学 习 。 








由 于 是 纯 CSS 实 现 ， 因 此 ， 只 要 是 选项 卡 样式 呈现 ， 束 能 进行 内 容 
切换 交互 。 而 传统 的 JavaScript 实 现 需要 等 JavaScript 加 载 完 毕 且 初始 化 
完毕 才能 进行 交互 ， 这 样 束 很 容易 过 到 明明 选项 卡 泻 染 出 来 了 ， 点 击 按 
钮 却 没 有 任何 反应 的 糟糕 的 体验 。 





:target 伪 类 交互 技术 其 实 出 现 很 入 了 ， 只 是 一 直 没 能 普 这 是 
因为 大 家 错误 地 把 容 右 元 素 作 为 了 销 链 元 系 ， 因 为 这 些 元 素 不 
是 display:none， 所 以 销 点 匹配 的 时 候 浏 览 器 会 跳动 ， 体 验 很 不 好 。 
而 我 在 这 里 把 display:none 元 素 作 为 锚 链 元 素 ， 利 用 兄 须 选择 器 控制 
状态 变化 ， 就 没有 这 种 糟糕 的 体验 。 








于 是 ， 综 合 下 来 ， 用 :target 伪 类 实现 交互 是 一 种 高 性 价 比 的 方 
法 ， 推 荐 在 项 目 中 尝试 ， 尤 其 是 在 懒得 写 JavaScript 的 场景 下 。 











3. 双管齐下 





:target 伪 类 交互 拉 术 也 不 是 完美 的 ， 一 是 它 对 DOM 结 构 有 要 求 ， 
锚 链 元 素 需 要 放 在 前 面 ， 二 是 它 的 布局 效果 并 不 稳定 。 接 着 上 面 的 例 
子 ， 由 于 URL 地 址 中 的 销 点 只 有 一 人 个， 因此， 一旦 页 面 其 他 什么 地 方 有 
一 个 锚 点 链接 ， 如 href 的 属性 值 是 ###， 用 户 一 点 击 ， 原 本 选中 的 第 二 
个 选项 卡 就 会 莫名其妙 地 切换 到 第 一 个 选项 卡 上 去 ， 因 为 销 点 变化 了 。 
这 可 能 并 不 是 用 户 希 望 看 到 的 。 














因此 ， 在 实际 开发 中 ， 如 果 对 项 目 要 求 很 高 ， 推 荐 使 用 双管齐下 的 
实践 策略 ， 有 具体 如 下 。 

(1) 默认 按照 :target 伪 类 交互 技术 实现 ， 实 现 的 时 候 与 一 个 类 
名 标志 量 关 联 。 

(2) JavaScript 也 正 第 实现 选项 卡 交 互 ， 当 JavaScript 成 功 绑 定 后 ， 
移 除 类 名 标志 量 ， 交 互 由 JavaScript 接 手 。 








这 样 ， 用 户 体验 既 保 持 了 敏捷 ， 也 保持 了 健壮 ， 这 才 是 站 在 用 户 体 
验 蜂 峰 的 实现 ， 我 都 是 这 么 实践 的 。 


8.4 日 标 容器 伪 类 :target-within 





缺 什 么 来 什么 。:target 伪 类 交互 技术 的 一 个 不 足 就 是 目前 只 能 借 
助 兄 弟 关 系 实现 ， 对 DOM 结 构 有 要 求 。 但 现在 有 了 :target-within 伪 
类 ，DOM 结 构 要 从 容 多 了 。 


:target-within 伪 类 可 以 匹配 :target 伪 类 匹配 的 元 素 ， 或 者 匹 








配 存 在 后 代 元 素 〈 包 括 文 本 节点 ) 匹配 :target 伪 类 的 元 素 。 


例如 ， 假 设 浏览 器 的 URL 后 面 的 错 点 地 址 是 #cs-anchor，HTML 
如 下 : 





"cs-first"> 第 1 行 ，id 是 cs-first</1i> 
"cs-anchor"> 第 2 行 ，id 是 cs-anchor</1i> 





"cs-last"> 第 3 行 ，id 是 cs-last</1i> 
_nCs_anchor" 第 4 行 ， id 同 样 是 cs-last</1i> 











则 :target 匹 配 的 是 1i#cs-anchor 元 素 ， 而 :target-within 不 仅 
可 以 匹配 1i#cs-anchor 元 素 ， 还 可 以 匹配 父 元 素 uL， 因 为 ul 的 后 代 元 
素 1i#cs-anchor 匹 配 : target 伪 类 。 


:target-within 伪 类 的 含义 与 :focus-within 伪 类 的 类 似 ， 只 是 
一 个 是 :target 伪 类 的 祖先 匹配 ， 一 个 是 :focus 伪 类 的 祖先 匹配 。 然 
而 ， 这 两 个 选择 器 的 浏览 器 文 持 情况 却 大 相 径 胜 ，:focus-within 伪 类 
目前 已 经 可 以 在 实际 项 目 中 使 用 ， 而 :target-within 伪 类 却 还 没有 浏 
览 器 支持 。 根 据 我 的 判断 ，:target 匹 配 原 本 就 是 DOM 完 全 加 载 完 毕 后 
才 和 触发， 因此， 技术 支持 与 现 有 泻 染 机 制 并 不 冲突 ， 理 论 上 是 可 行 的 ， 
因此 ， 以 后 还 是 很 有 可 能 会 文 持 。 








因为 目前 尚未 有 浏览 器 文 持 这 一 伪 类 ， 所 以 这 里 不 展开 介绍 。 





[1] 由 于 下 浏览 器 不 认为 空 的 href 属 性 是 当前 页 面 地 址 (认为 是 当前 
目录 根 地 址 ) ， 因 此 ， 上 面 第 2 个 <a> 元 素 的 颜色 不 会 变 ， 如果 不 是 空 链 











接 ， 而 是 其 他 访问 过 的 链接 ， 则 下 浏览 器 不 显示 背景 色 ， 这 有 别 于 


Chrome/Firefox 等 浏览 器 。 


本 章 将 介绍 与 表单 控件 元 素 〈 如 <input>、<select> 和 
<textarea>) 相关 的 伪 类 ， 这 些 伪 类 中 很 多 都 非常 实用 ， 掌 握 这 些 伪 


类 是 前 端 人 员 的 必 备 技能 。 


9.1 输入 控件 状态 








本 节 介 绍 的 所 有 伪 类 都 可 以 在 实际 项 目 中 使 用 ， 都 是 很 实用 的 。 


9.1.1 可 用 状态 与 禁用 状态 伪 类 :enabled 
和 :disabled 


:enabled 伪 类 和 :disabled 伪 类 从 IE9 浏 览 器 束 已 经 开始 支持 ， 可 


以 放心 使 用 。 





由 于 在 实际 项 目 中 :disabled 伪 类 用 得 较 多 ， 因 此 我 们 先 
从 :disabled 伪 类 说 起 。 


1. 先 从 :disabled 伪 类 说 起 


先 来 看 看 :disabled 伪 类 的 基本 用 法 。 最 简单 的 用 法 是 实现 禁用 状 
态 的 输入 框 ，HTML 如 下 : 


<input disabled> 


此 时 ， 我 们 就 可 以 使 用 :disabled 仿 类 设置 输入 框 的 样式 。 例 如 ， 


背景 置 灰 : 


:disabled { 
border: 1px solid lightgray; 


background: #fofof3 
} 





效果 如 图 9-1 所 示 。 

















图 9-1 输入 框 处 于 禁用 状态 时 背景 置 灰 (使 用 :disabled 伪 类 实现 ) 











实际 上 ， 直 接 使 用 属性 选择 器 也 能 设置 禁用 状态 的 输入 框 的 样式 。 
例如 : 


[disabled] { 
border: 1px solid lightgray; 


background: #fofof3 
} 





效果 是 一 样 的 ， 如 图 9-2 所 示 。 





图 9-2 ”输入 框 处 于 禁用 状态 时 背景 置 灰 《使 用 属性 选择 器 实现 ) 











后 一 种 方法 兼容 性 更 好 ，IE8 浏 览 器 也 支持 。 这 就 很 奇怪 了 ， 为 何 
还 要 “多 此 一 举 ”， 设 计 一 个 新 的 :disabled 伪 类 呢 ? 


这 个 问题 的 解答 可 参见 9.2.1 节 ， 与 :checked 伪 类 的 设计 原因 有 很 
多 相似 之 处 。 


2. :enabled 和 :disabled 若 于 细节 知识 








我 们 需要 先 搞 明白 :enab1led 伪 类 与 :disabled 伪 类 是 否 完 全 对 


对 于 常见 的 表单 元 素 ，:enabled 伪 类 与 :disabled 伪 类 确实 是 完 
全 对 立 的， 也 就 是 说 ， 如 果 这 两 个 伪 类 样式 同时 设置 ， 总 会 有 一 个 伪 类 
样式 匹配 。 下 面 以 输入 框 元 素 为 例 ，CSS 和 HTML 如 下 : 

:disabled { 


border: 1px solid lightgray; 
background: #f6f0Of3; 


} 
:enabled { 


border: 1px solid deepskyblue; 
background: lightskyblue; 
} 
<input disabled value=" 禁 用 "> 
<input readonly value=" 只 读 "> 
<input value=" 普 通 "> 








readonly (只 读 ) 状态 也 认为 是 :enabled， 最 终 效 果 如 图 9-3 所 


图 9-3”:enabled 与 :disabled 样 式 必定 演 染 其 一 


漂 
加 


但 是 有 一 个 例外 ， 那 就 是 <a> 元 素 ， 在 Chrome 浏 览 器 下 ， 带 有 href 


属性 的 <a> 元 素 可 以 匹配 :enabled 伪 类 。 例 如 : 


<a href> 链 接 </a> 


在 Chrome 浏 览 器 下 的 效果 如 图 9-4 所 示 ， 深 天 蓝 边 框 ， 浅 天 蓝 背 


上 与. 
后 0o 





图 9-4 Chrome 浏览 器 下 <a> 元 素 匹 配 :enabled 伪 类 


但 是 它 却 无 法 匹配 :disabled 伪 类 。 下 面 3 种 写法 都 是 无 效 的 : 





<1-- 全 部 无 法 匹配 :disabled 伪 类 --> 
<Ul> 
<1i><a> 无 链接 </a></1i> 
<li><a disabled> 无 链接 有 disabled</a></1i> 
<1li><a href disabled> 有 链接 同时 disabled</a></1i> 
</ul> 





在 Chrome 浏 览 器 下 没有 一 个 ca> 元 素 匹 配 :disabled 伪 类 ( 没 
有 <a> 元 素 会 出 现 灰 边框 和 灰 背 景 ) ， 如 图 9-5 所 示 。 





。 无 链接 
. bed 
Hldisabled 





图 9-5 ”Chrome 浏览 器 下 <a> 元 素 不 匹配 :disabled 伪 类 


在 Chrome 浏 览 器 下 ，<a> 元 素 的 这 种 非 对 立 特性 实际 上 是 不 符合 规 
范 的 ，Firefox 和 和 IE 浏览 器 忽略 <a> 的 :enabled 伪 类 。 但 是 ， 因 为 现在 大 
部 分 用 户 浏 览 器 都 是 Chrome， 所 以 实际 开发 的 时 候 一 定 要 注意 尽量 避 








免 使 用 裸露 的 :enabled 仿 类， 因为 这 样 会 影响 链接 元 素 的 样式 。 


其 他 细 市 








对 于 <select> 下 拉 杠 元素， 无 论 是 <select> 元 素 自身 ， 还 是 后 代 
<option> 元 素 ， 都 能 匹配 :enabled 伪 类 和 :disabled 伪 类 ， 所 有 浏览 
器 都 匹配 。 


在 IE 浏 览 器 下 <fieldset> 元 素 并 不 支持 :enabled 伪 类 
与 :disabled 伪 类 ， 这 是 有 问题 的 ， 但 其 他 浏览 器 没有 这 个 问题 。 因 
此 ， 如 果 使 用 <fieldset> 元 素 一 次 性 禁用 所 有 表单 元 素 ， 束 不 能 通 
过 :disabled 伪 类 识别 (如 果 要 兼容 IE) ， 可 以 使 
用 fieldset[disabled] 选 择 器 进行 匹配 。 





设置 contenteditable="true" 的 元 素 虽 然 也 有 输入 特征 ， 但 是 并 
不 能 匹配 :enabled 伪 类 ， 所 有 浏览 器 都 不 上 匹配。 同样 ， 设 置 tabindex 
属性 的 元 素 也 不 能 匹配 :enabled 仿 类 。 


元 素 设 置 visibility:hidden 或 者 display:none 依 然 能 够 匹 
配 :enabled 伪 类 和 :disabled 伪 类 。 





3. :enabled 伪 类 和 :disabled 伪 类 的 实际 应 用 


:enabled 伪 类 在 CSS 开 发 中 是 一 个 有 点 儿 鸡 肋 的 伪 类 ， 因 为 表单 元 
素 默 认 就 是 enabled 状 态 的 ， 不 二 要 额外 的 :enabled 伪 类 匹配。 例 
如 ， 可 以 像 下 面 这 样 做 : 


.CS-input { 
border: 1px solid lightgray; 
background: white; 


} 

.CS-input:disabled { 
background: #fofof3 

} 





而 无 须 多 此 一 举 再 写 上 :enabled 伪 类 : 


/* :enabled 多 余 */ 

.CS-input:enabled { 
border: 1px solid lightgray; 
background: white; 

} 

.CS-input:disabled { 
background: #fofof3 

} 





但 是 :enabled 伪 类 在 JavaScript 开 发 中 却 不 鸡肋 ， 例 如 ， 使 
用 querySelectorA11 这 个 API 匹 配 可 用 元 素 的 时 候 就 很 方便 。 另 外 ， 
我 们 可 以 借助 :enabled 伪 类 敏捷 区 分 I[E8 和 IE9 浏 览 器 。 例 如 : 


/* IE8+ */ 
.Cs-exmaple {} 


/* IE9+ */ 
.any-class:enabled, .cs-exmaple {} 





由 于 IE8 浏 览 嚣 不 认识 :enabled 伪 类 ， 因 此 整 行 语句 失效 ， 浏 览 器 
版 本 自然 就 区 分 开 了 。 与 经 典 的 :root 伪 类 hack 方 法 相 比 ， 这 种 方法 的 
优点 是 不 会 增加 .cs-exmaple 选 择 器 的 优先 级 : 


/* IE8+ */ 
.Cs-exmaple {} 


/* IE9+， 会 增加 选择 器 优先 级 ， 不 推荐 */ 


:root .cs-exmaple {} 





然后 ，:enabled 伪 类 在 JavaScript 中 的 作用 要 比 在 CSS 中 大 。 例 
如 ， 我 们 可 以 使 用 document.querySelectorAll('form :enabled') 
查询 所 有 可 用 表单 元 素 ， 以 实现 自 定义 的 表单 序列 化 方法 。 








至 于 :disabled 伪 类 ， 最 和 常用 的 应 该 就 是 按钮 了 。 














只 要 你 的 网 页 项 目 不 需要 兼容 很 旧 的 下 浏览 器 ， 就 可 以 使 用 原生 的 
<button> 按 钮 实现 ， 这 样 做 的 优点 非常 多 。 以 按钮 禁用 为 例 ， 点 击 按 
钮 发 送 Ajax 请 求 是 一 个 异步 过 程 ， 为 了 防止 重复 点 击 请 求 ， 通 常 的 做 法 
是 设置 标志 量 。 实 际 上 ， 如 果 按 钮 是 原生 的 按钮 (无 论 是 <button> 按 
钮 还 是 <input> 按 钮 ) ， 此 时 ， 只 要 设置 按钮 disabled=true， 点 击 事 
件 自然 就 会 失效 ， 无 须 用 额外 的 JavaScript 代 码 进行 判断 ， 同 时 语义 更 
好 ， 还 可 以 使 用 :disabled 伪 类 精确 控制 样式 。 例 如 : 








<button id="csButton" class="cs-button" > 删除 </buttony> 


/* 按钮 处 于 禁用 状态 时 的 样式 */ 





.CS-button:disabled {} 
csButton.addEventListener('click', function () { 
this.disabled = true; 

// 执行 ajax 

// ajax 完成 后 设置 按钮 disabled 为 false 

}); 








充分 利用 浏览 右 内 置 行为 会 使 代码 更 简洁 ， 功 能 更 健壮 ， 语 义 更 
好 ， 因 此 没有 不 使 用 它 的 理由 ! 





由 于 历史 遗留 原因 ， 网 页 中 的 按钮 多 使 用 <a> 元 素 。 对 于 禁用 状 
态 ， 很 多 人 会 用 pointer-events :none 来 控制 ， 虽 然 点 击 它 确实 无 
效 ， 但 是 键盘 Tab 依 然 可 以 访问 它 ， 按 回 车 键 也 依然 可 以 触发 点 击 事 


件 ， 用 这 种 方法 实现 的 其 实 是 一 个 伪 禁 用 。 同 时 ， 设 置 了 pointer- 
events :none 的 元 素 无 法 显示 title 提 示 ， 可 用 性 反而 下 降 。 因 此 ， 请 
与 时 俱 进 ， 尽 量 使 用 原生 按钮 实现 交互 效果 。 











:disabled 伪 类 除了 设置 元 系 本 身 的 禁用 样式 ， 还 可 以 借助 兄弟 选 
择 符 同步 设置 自 定义 表单 元 素 的 样式 。 例 如 : 














/* 自 定 义 下 拉 框 元 素 样式 禁用 */ 
:disabled + .cs-custom-select {} 


/* 自 定义 单 选 框 样式 禁用 */ 

















:disabled + .cs-custom-radio {} 
/* 自 定义 复 选 框 样式 禁用 */ 


:disabled + .cs-custom-checkbox {} 











9.1.2 读 写 特性 伪 类 :read-only 和 :read- 
write 





这 两 个 伪 类 很 好 理解 ， 它 们 用 于 匹配 输入 框 元 素 是 否 只 读 ， 还 是 可 
读 可 写 。 


这 两 个 伪 类 中 间 都 有 短 横 线 ， 由 于 “只 读 ” 的 HIML 属 性 
是 readonly， 中 间 没 有 短 横 线 ， 因 此 很 多 人 会 记 混 。 所 以 有 短 横 线 这 
一 点 大 家 可 以 注意 一 下 。 


另外 ， 这 两 个 伪 类 只 作用 于 <input> 和 <textarea> 这 两 个 元 
素 吓 。 


现在 ， 我 们 通过 一 个 简单 的 例子 ， 快 速 了 解 一 下 这 两 个 伪 类 : 


<textarea> 默 认 </textareay> 


<textarea readonly> 只 读 </textarea> 
<textarea disabled> 禁 用 </textarea> 





CSS 代 码 为 : 


textarea { 
border: 1px dashed gray; 
background: white; 





/* Firefox 还 需要 加 -moz- 私 有 前 缀 */ 
textarea:read-write { 





border: 1px solid black; 
background: gray; 


} 

textarea:read-only { 
border: 1px solid gray; 
background: lightgray; 


} 





结果 如 图 9-6 所 示 ， 出 现 这 样 的 现象 可 能 会 出 乎 你 意料 ， 明 明 不 能 
输入 任何 信息 的 disabled 状 态 居 然 匹 配 了 :read-write 伪 类 : 


:二 
lle 
区 


图 9-6 禁用 状态 也 匹配 :read-write 伪 类 

















站 在 实用 主义 的 角度 ，:read-write 出 场 机 会 很 有 限 ， 因 为 输入 框 
的 默认 状态 就 是 :read-write， 我 们 很 少 会 额外 设置 :read-write 伪 类 
给 自己 添 堵 ， 只 会 使 用 :read-only 对 处 于 readonly 状 态 的 输入 框 进 行 
样式 重 置 。 


不 过 ， 因 为 下 浏览 器 并 不 文 持 这 两 个 伪 类 ， 所 以 这 两 个 伪 类 只 能 在 
移动 端 和 内 部 项 目 、 实 验 项 目 中 使 用 。 


男 外 ， 如 果 你 的 项 目 需 要 兼容 Firefox 浏 览 器 ， de 
用 :read-only 伪 类 ， 因 为 截至 2019 年 8 月 Firefox 浏 览 要 添加 - 
moz- 私 有 前 级 。 由 于 其 他 浏览 器 都 并 不 认识 -moz- 私 有 前 级 ，Firefox 浏 
览 器 又 不 认识 :read-only， 因 此 会 导致 整 行 选择 器 在 所 有 浏览 器 下 都 


/* 没有 任何 浏览 器 可 以 匹配 */ 

textarea:read-only, 

textarea:-moz-read-only { 
border: 1px solid gray; 
background: lightgray; 








textarea:read-only { 
border: 1px solid gray; 
background: lightgray; 

} 

textarea:-moz-read-only { 
border: 1px solid gray; 
background: lightgray; 





很 显然 ， 这 样 书写 代码 就 很 嗓 嗪 。 


因此 ， 遇 到 这 种 需要 兼容 Firefox 浏 览 器 的 场景 ， 建 议 使 用 属性 选择 
器 代替 : 
textarea[readonly] { 


border: 1px solid gray; 
background: lightgray; 


} 





readonly 和 disabled 的 区 别 


设置 readonly 的 输入 框 不 能 输入 内 容 ， 但 它 可 以 被 表单 提交 ; 设 
置 disabled 的 输入 框 不 能 输入 内 容 ， 也 不 能 被 表单 提交 。readonl1y 输 
入 框 和 普通 输入 框 的 样式 类 似 ， 但 是 浏览 器 会 将 设置 了 disabled 的 输 
入 框 中 的 文字 置 灰 来 加 以 区 分 。 





9.1.3” 占 位 符 显 示 伪 类 :placeholder-shown 


:placeholder-shown 伪 类 的 匹配 和 placeholder 属 性 密切 相关 ， 
顾名思义 就 是 “ 占 位 符 显 示 伪 类 ”， 表 示 当 输入 框 的 placeholder 内 容 显 
示 的 时 候 ， 匹 配 该 输入 框 。 





例如 : 


<input placeholder=" 输 入 任意 内 容 "> 
input { 
border: 2px solid gray; 


} 
input:placeholder-shown { 
border: 2px solid black; 





} 


默认 状态 下 ， 输 入 框 的 值 为 空 ，placeholder 属 性 对 应 的 占 位 符 内 
容 显示 ， 此 时 匹配 :placeholder-shown 伪 类 ， 边 框 颜色 表现 为 黑色 ; 
当 我 们 输入 任意 的 文字 ， 如 “CSS 世 界 *”， 由 于 占 位 符 内 容 不 显示 ， 因 此 
无 法 匹配 :placeholder-shown 伪 类 ， 边 框 颜色 表现 为 灰色 ， 如 图 9-7 
所 示 。 





[六 | < 一 区 本 placeholder-shown 筷 类 
< 一 不 显示 点 住 答 内 容 ， 故 伪 关 不 区 配 























图 9-7 :placeholder-shown 伪 类 基本 作用 示意 


:placeholder-shown 伪 类 的 浏览 器 兼容 性 非常 好 ， 除 下 浏览 器 不 
文 持 之 外 ， 在 其 他 场景 下 都 能 放心 使 用 ， 目 前 最 经 典 的 应 用 就 是 纯 CSS 
实现 Material Design 风 格 占 位 符 交 互 效 果 。 


1. 实现 Material Design 风 格 占 位 符 交 互 效果 


这 种 交互 风格 如 图 9-8 所 示 官方 效 果 截 图 ) ， 输 入 框 处 于 聚焦 状 
态 时 ， 输 入 框 的 占 位 符 内 容 以 动画 形式 移动 到 左上 角 作 为 标题 存在 。 


现在 这 种 设计 在 移动 端 很 常见 ， 因 为 宽度 较 稀缺 。 相 信 不 少 人 在 实 
际 项 目 中 实现 过 这 种 交互 ， 而 且 ， 我 敢 肯 定 一 定 是 借助 JavaScript 实 现 
的 。 








实际 上 ， 我 们 可 以 借助 CSS :placeholder-shown 伪 类 〈 纯 CSS， 
无 任何 JavaScript) 实现 这 样 的 占 位 符 交 互 效 果 。 例 如 ， 图 9-9 展 示 的 就 
是 我 实现 的 真实 效果 截图 。 


a :default 


Standard 


:focus 


图 9-8 Material Design 风 格 占 位 符 交 互 示 意 


默认 么 竹 内 办 填写 


填充 风格 填充 风格 填充 风格 


邮箱 邮箱 
| admin@cssworld.cn 





轮廓 风格 轮廓 风格 轮廓 风格 
> 最 箱 


| admin@cssworld.cn 





文本 域 文本 域 文本 域 





感谢 您 的 购买 与 支持 ! 








图 9-9 Material Design 风 格 占 位 符 交 互 实现 截图 
以 第 一 个 “填充 风格 ”的 输入 框 为 例 ， 它 的 HTML 结 构 如 下 : 


<div class="input-fill-x"> 


1 


<input class="input-fill" placeholder=" 邮 箱 "> 





<label class="input-label"> 邮 箱 </1abel> 
</div> 








首先 ， 让 浏览 器 默认 的 placeholder 效 果 不 可 见 ， 只 需 将 color 设 
置 为 transparent 即 可 ，CSS 如 下 : 





/* 默认 placeholder 颜 色 透 明 不 可 见 */ 
.input-fil1l1:placeholder-shown: :placeholder { 


color: transparent 


} 


然后 ， 用 下 面 的 .input-label 元 素 代 从 浏览 此 原生 的 占 位 符 成 为 
我 们 肉眼 看 到 的 占 位 符 。 我 们 可 以 采用 绝对 定位 : 


.ijnput-fill-x { 
position: relative; 

} 

.input-label { 


position: absolute; 
left: 16px; top: 14px; 
pointer-events: none; 


} 





最 后 ， 在 输入 框 聚 焦 以 及 占 位 符 不 显示 的 时 候 对 <labe1> 元 系 进 行 
重 定位 《缩小 并 位 移 到 上 方 ) : 


.input-fill:not(:placeholder-shown) ~ .input-label, 
.ijnput-fill:focus ~ .input-label { 


transform: scale(6.75) translate(86，-32pX) ; 
} 





效果 达成 ! 很 显然 ， 这 要 比 使 用 JavaScript 写 各 种 事件 和 判断 各 种 场 
景 简 单 多 了 ! 


眼见 为 实 ， 读 者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/1- 
1.php 或 扫描 下 面 的 二 维 码 杀 自 体验 与 学 习 。 








2. :placeholder-shown 与 空 值 判 断 


由 于 placeholder 内 容 只 在 空 值 状 态 的 时 候 才 显示 ， 因 此 我 们 可 以 
借助 :placeholder-shown 伪 类 来 判断 一 个 输入 框 中 是 否 有 值 。 


例如 : 


textarea:placeholder-shown + small::before, 
input:placeholder-shown + small::before { 
content: “尚未 输入 内 容 ' ; 
color: red; 


font-size: 87.5%; 
} 
<input placeholder=" "> <small></small> 
<textarea placeholder=" "></textarea> <small></small> 





可 以 看 到 输入 框 中 没有 输入 内 容 的 时 候 出 现 了 空 值 提示 信息 ， 如 图 
9-10 所 示 。 


尚未 输入 内 容 


图 9-10 ” 衬 值 提示 截图 示意 


当 我 们 在 输入 框 内 输入 值 ， 则 可 以 看 到 提示 信息 消失 了 ， 如 图 9-11 
所 示 。 





内 容 Pp 
ee 空 值 提示 信息 
内 容 采风 了 


图 9-11 输入 文本 后 空 值 提示 消失 截图 示意 





于 是 ， 我 们 就 可 以 不 使 用 JavaScript 实 现 用 户 必 填 内 容 的 验证 提示 交 
互 。 


9.1.4 默认 选项 伪 类 :default 


CSS :default 伪 类 选择 器 只 能 作用 在 表单 元 素 上 ， 表 示 处 于 默认 
状态 的 表单 元 素 。 








举 个 例子 ， 一 个 下 拉 框 可 能 有 多 个 选项 ， 我 们 会 默认 让 某 个 
<option> 处 于 selected 状 态 ， 此 时 这 个 <option> 可 以 看 成 是 处 于 默认 
状态 的 表单 元 素 〈 如 下 面 示 意 代码 中 的 “选项 4?) ， 理 论 上 可 以 匹 
配 :default 伪 类 选择 器 。 








<select multiple> 
<option> 选 项 1</option> 
<option> 选 项 2</option> 
<option> 选 项 3</option> 














<option selected> 选 项 4</option> 

<option> 选 项 5</optiony> 

<option> 选 项 6</optiony> 
</Select> 














假设 CSS 如 下 : 


option:default { 
color: red; 
} 
则 在 Chrome 浏 览 器 下 ， 当 我 们 选择 其 他 选项 ， 此 时 就 可 以 看 到 “ 选 


项 4” 是 红色 的 ， 效 果 如 图 9-12 所 示 。Firefox 浏 览 器 下 的 效果 类 似 ， 如 图 


9-13 所 示 O 





图 9-12 ”Chrome 浏览 器 下 默认 “选项 4” 是 红色 的 





图 9-13 ”Firefox 下 默认 “选项 4 是 红色 的 


IE 浏 览 器 不 支持 :default 伪 类 ，。 

移动 端 可 以 放心 使 用 :default 伪 类 ， 不 考虑 用 下 浏览 器 的 条 面 端 
的 项 目 也 可 以 用 。 
1. :default 伪 类 的 作用 与 细节 


CSS :default 伪 类 设计 的 作用 是 让 用 户 在 选择 一 组 数据 时 ， 依 然 
知道 默认 选项 是 什么 ， 否 则 一 旦 其 他 选项 增多 ， 就 不 知道 默认 选项 是 哪 


一 个 ， 算 是 一 种 体验 增强 策略 。 虽 然 它 的 作用 不 是 特别 强大 ， 但 是 关键 
时 刻 它 却 很 有 用 。 


下 面 介绍 :default 伪 类 的 一 些 细节 知识 。 
JavaScript 的 快速 修改 不 会 影响 :default 伪 类 。 
测试 代码 如 下 : 


:default { 
transform: scale(1.5); 


} 


<input type="radio" name="city" value="0"> 


<input type="radio" name="city" value="1" checked> 

<input type="radio" name="city" value="2"> 

<script> 

document .querySelectorAll('[type="radio"]')[2].checked = true; 
</script> 





也 就 是 次 ，HIML 是 将 第 二 个 单 选 框 放大 1.5 倍 ， 然 后 瞬间 将 第 三 个 
单 选 框 设 置 为 选中 ， 结 果 发 现 即使 切换 速度 特别 快 ， 哪 人 是 几乎 无 延迟 
的 JavaScript 修 改 ，:default 伪 类 选择 器 的 泻 染 依然 不 受 影响 。 实 际 演 
染 如 图 9-14 所 示 。 








三 














图 9-14 ” 单 选 按 钮 选中 和 放大 效果 截图 











如 果 <option> 没 有 设置 selected 属 性 ， 浏 览 器 会 默认 呈现 第 一 个 
<option>， 此 时 第 一 个 coption> 不 会 匹配 :default 伪 类 。 例 如 : 


option:default { 
color: red; 

} 

<Select name="city"> 
<option value="-1"> 请 选择 </option> 
<option value="1"> 北 京 </option> 


<option value="2"> 上 海 </option> 

<option value="3"> 深 圳 </option> 

<option value="4"> 广 州 </option> 

<option value="5"> 厦 门 </option> 
</select> 





结果 第 一 个 <option> 没 有 变 成 红色 ， 如 图 9-15 所 示 ， 因 此 ， 要 想 
匹配 :defau1lt 伪 类 ，selected 必 须 为 true。 同 样 ， 对 于 单 复 选 
框 ，checked 属 性 值 也 必须 为 true。 


| 请 选择 | 
请 选择 





图 9-15 “请 选择 ”没有 变 红 





2. :default 伪 类 的 实际 应 用 


虽然 次 :default 伪 类 是 用 来 标记 默认 状态 ， 以 避免 选择 混 消 的 ， 但 
实际 上 在 我 看 来 ， 它 更 有 实用 价值 的 应 用 应 该 是 “推荐 标记 ”。 








例如 ， 某 产品 有 多 个 支付 选项 ， 其 中 商家 推荐 使 用 微 信 支 付 ， 如 图 
9-16 所 示 。 


请 选择 支付 方式 : 


支付 主 we 


图 9-16 “推荐 ”字样 显示 截图 








以 前 的 做 法 是 默认 选中 微 信 支付 选项 ， 并 在 后 面 加 上 “(推荐 ) ”。 
这 样 实现 有 一 个 缺点 : 如 果 以 后 要 改变 推荐 的 支付 方式 ， 需 要 修改 单 选 
框 的 checked 属 性 和 “(推荐 ) ”文案 的 位 置 。 有 J 了 :default 伪 类 ， 可 以 
让 它 变 得 更 加 简洁 ， 也 更 容易 维护 。 


使 用 如 下 所 示 的 CSS 和 HTML 代 码 就 可 以 实现 图 9-16 所 示 的 效果 : 


input:default + label::after { 
content: "(推荐 )'; 
} 
<p><input type="radio" name="pay"” id="pay86"> <label for="paye"> 支 付 宝 </1ab 
el></p> 
<p><input type="radio" name="pay" id="pay1l" checked> <label for="pay1"> 微 


信 </1label></p> 


<p><input type="radio" name="pay"” id="pay2"> <label for="pay2"> 银 行 卡 </1ab 
el></p> 





由 于 :default 伪 类 的 匹配 不 受 之 后 checked 属 性 值 变 化 的 影响 ， 
因此 “(推荐 ) ”会 一 直 跟 在 “ 微 信 ”的 后 面 ， 功 能 不 会 发 生变 化 。 这 样 做 
之 后 维护 更 方便 了 ， 例 如 ， 如 果 以 后 想 将 推荐 支付 方式 更 换 为 “ 文 付 宝 ” 
， 则 直接 设置 “支付 宝 ” 对 应 的 <input> 单 选 框 为 checked 状 态 即 
可 ,“【〔 推 荐 ) ”文案 会 自动 跟 过 来 ， 整 个 过 程 我 们 只 需要 修改 一 处 。 








读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/1-2.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








9.2 输入 值 状态 


这 里 要 介绍 的 两 个 伪 类 是 与 单 选 框 和 复 选 框 这 两 类 表单 元 素 密切 相 
关 的 ，HTML 示 意 如 下 : 

















<!-- 单 选 框 -- 
<input type="radio"> 
<1-- 复 选 框 --> 





<input type="checkbox"> 


9.2.1 选中 选项 伪 类 :checked 


本 市 即将 介绍 的 :checked 伪 类 交互 技术 可 以 说 是 整个 CSS 伪 类 交互 
技术 中 最 实用 、 满 意 度 最 高 的 技术 ， 可 能 有 一 些 开 发 者 对 此 技术 已 经 有 
所 了 解 ， 耐 下 心 来 ， 说 不 定 会 及 现 你 没有 注意 到 的 一 些 知识 点 。 





我 们 先 通过 一 个 简单 的 例子 ， 快 速 了 解 一 下 这 个 伪 类 : 


input:checked { 


box-shadow: 6 6 6 2px red 
} 
<input type="checkbox"> 
<input type="checkbox” checked> 





结果 如 图 9-17 所 示 ， 处 于 选中 状态 的 复 选 框 外 多 了 2 个 像素 的 红色 
线 框 。 


图 9-17 ”处 于 选中 状态 的 复 选 框 丐 配 了 :checked 伪 类 
实际 上 ， 这 里 直接 使 用 属性 选择 右 也 能 得 到 一 样 的 效果 。 


input[checked] { 
box-shadow: 6 6 6 2px red; 
} 





那么 问题 来 了 ，:checked 伪 类 的 意义 是 什么 呢 ? 这 个 问题 的 答案 


和 下 面 这 两 个 问题 的 答案 类 似 ， 我 将 统一 解答 。 








。 既然 [disabled] 也 能 匹配 ， 那 么 :disabled 伪 类 的 意义 是 什么 ? 
。 既然 [readonly] 也 能 匹配 ， 那 么 :read-only 伪 类 的 意义 是 什么 ? 








1. 为 何不 直接 使 用 [checked] 属 性 选择 器 


不 直接 使 用 [checked] 属 性 选择 器 有 两 个 重要 原因 。 





(1) :checked 只 能 匹配 标准 表单 控件 元 素 ， 不 能 匹配 其 他 普通 元 
素 ， 即 使 这 个 普通 元 素 设 置 了 checked 属 性 。 但 是 [checked] 属 性 选择 


器 却 可 以 与 任意 元 素 匹 配 。 例 如 : 


:checked { backgroud: skyblue; } 


[checked] { border: 2px solid deepskyblue; } 
<canvas width="1286" height="80" checked></canvas> 





结果 如 图 9-18 所 示 ， 边 框 有 颜色 ， 但 背景 却 没 有 颜色 ， 这 是 因 
为 :checked 伪 类 为 表单 元 素 专 属 。 











图 9-18 :checked 伪 类 无 法 匹配 <canvas> 元 素 ，[checked] 属 性 选择 器 可 以 匹配 


(2) [checked] 属 性 的 变化 并 非 实 时 的 。 这 是 不 建议 使 
用 [checked] 属 性 选择 器 控制 单 复 选 框 选中 状态 样式 最 重要 的 原因 。 例 
如 ， 已 知 


<input type="checkbox"> 


此 时 我 们 使 用 JavaScript 设 置 该 复 选 框 的 checked 状 态 为 true: 











document .querySelector( ' [type="checkbox"] ' ) .checked = true; 


结果 虽然 视觉 上 复 选 框 表现 为 选中 状态 ， 但 是 实际 上 HTML 代 码 中 
并 没有 checked 属 性 值 ， 如 图 9-19 所 示 。 


v <body 
虽 是 选中 极 专 ， 一 
但 并 元 checked 遍 性 EE 


fhtml 





图 9-19 ” 复 选 框 表 现 为 选中 状态 但 并 无 checked 属 性 





这 束 意 味 着 ， 使 用 [checked] 属 性 选择 右 控 制 日 复 选 框 的 样式 会 出 
现 匹 配 不 准确 的 情况 ， 而 :checked 伪 类 匹配 就 不 存在 这 个 问题 。 
此 ， 不 建议 使 用 [checked] 属 性 选择 器 。 














根据 我 的 测试 ， 这 种 真实 状态 和 属性 值 不 匹配 的 场景 主要 
在 checked 状 态 变化 的 时 候 出 现 ，disabled 状 态 发 生变 化 时 浏览 器 会 
自动 同步 相关 属性 值 。 


(3) 伪 类 可 以 正确 匹配 从 祖先 元 系 那 里 继承 过 来 的 状态 ， 但 是 属 
性 选择 器 却 不 可 以 。 例 如 : 


<fieldset disabled> 
<input> 


<textarea></textarea> 
</fieldset> 








如 果 <fieldset> 元 素 设 置 disabled 禁 用 ， 则 内 部 所 有 的 表单 元 素 
也 会 处 于 禁用 状态 ， 不 管 有 没有 设置 disabled 属 性 。 此 时 ， 由 于 input 
元 素 没 有 设置 disabled 属 性 ， 因 此 input[disabled] 以 及 
textarea[disabled] 选 择 器 是 不 能 正确 匹配 的 ， 但 是 ，:disabled 伪 
类 选择 器 却 可 以 正确 匹配 : 








/* 可 以 正确 匹配 处 于 禁用 态 的 <fieldset> 子 元 素 */ 
input :disabled， 
textarea:disabled { 

border: 1px solid lightgray; 

background: #fofof3 





} 





2. 单 复 选 框 元 素 显 隐 拉 术 


由 于 单 选 框 和 复 选 框 的 选中 行为 是 由 点 击 事件 触发 的 ， 因 此 配合 兄 
第 选择 符 ， 可 以 选择 不 使 用 JavaScript 实 现 多 种 点 击 交 互 行为 ， 如 展开 与 
收 起 、 选 项 卡 切 换 或 者 多 级 下 拉 列 表 等 。 


例如 ， 要 实现 展开 与 收 起 效果 的 HTML 如 下 : 


文章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 章 内 容 
<input type="checkbox" id="articleMore"> 
<label class="cs-button" for="articleMore" data-open="true"> 阅 读 更 多 </1abel 








> 

<p class="cs-more-p"> 更 多 文章 内 容 ， 更 多 文章 内 容 ， 更 多 文章 内 容 ， 更 多 文章 内 容 。</ 
p> 

<label class="cs-button" for="articleMore" data-open="false"> 收 起 </label> 























CSS 代 人 码 如 下 : 





[type="checkbox"] { 
position: absolute; 
clip: rect(60 60 0 98); 


} 
/* 默认 “更 多 文章 内 容 ” 和 “ 收 起 ”按钮 隐藏 */ 
.CS-more-p， 
[data-open=false] { 
display: none; 


} 

/* 匹配 后 “阅读 更 多 ”按钮 隐藏 */ 

:checked ~ [data-open=true] { 
display: none; 





} 
/* 匹配 后 “更 多 文章 内 容 ” 和 “ 收 起 ”按钮 显示 */ 


:checked ~ .cs-more-p, 
:checked ~ [data-open=false] { 
display: block; 





细心 的 你 表 定 会 注意 到 这 里 实现 的 核心 逻辑 和 :target 伪 类 是 一 模 
一 样 的 ， 差 别 在 于 这 里 使 用 了 <1Labe1> 元 素 和 隐藏 的 复 选 框 关联 ， 
而 :target 伪 类 技术 则 使 用 了 <a> 元 素 和 隐藏 的 锚 链 元 素 关 联 。 两 者 实 
现 的 效果 也 一 样 ， 默 认 效 果 如 图 9-20 所 示 。 


文章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 章 内 容 ， 文 
章 内 容 ， 文章 内 容 ， 文章 内 容 ..…. 
疯 读 更 多 


图 9-20 ”展开 显示 更 多 内 容 这 种 交互 效果 的 默认 状态 


扩 击 “阅读 更 多 ”按钮 后 ， 布 局 效果 如 图 9-21 所 示 。 


文章 内 容 ， 文章 内 容 ， 文章 内 容 ， 文章 内 容 , 文 


章 内 容 ， 文章 内 容 ， 文章 内 容 ..…. 


更 窑 文 章 内 容 ,更 多 文章 内 容 ,更 多 区 草 内 容 ， 
更 窑 文 章 内 容 。 


图 9-21 展开 更 多 内 容 后 的 显示 效果 








读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 





同样 ， 我 们 也 可 以 仿照 :target 伪 类 的 套路 实现 :checked 伪 类 的 
选项 卡 效 果 。 


选项 卡 效果 本 质 上 就 是 多 选 一 ， 与 [type="radio"] 的 本 质 是 一 臻 
的 ， 可 以 使 用 单 选 框 元 素 和 : checked 伪 类 实现 。 


HTML 结 构 如 下 : 


<div class="cs-tab-x"> 
<!-- 单 选 框 组 --> 
<input id="tabPane11"” type="radio" name="tab" checked hidden> 
<input id="tabPpanel2" type="radio" name="tab" hidden> 
<input id="tabPpanel3" type="radio" name="tab" hidden> 
《<1-- 以 下 为 标准 选项 卡 DOM 结 构 --> 
<div class="cs-tab"> 
<label class="cs-tab-1i" for="tabpPanel1"> 选 项 卡 1</1label> 
<label class="cs-tab-1i" for="tabpPanel2"> 选 项 卡 2</1label> 
<label class="cs-tab-1i" for="tabpPanel3"> 选 项 卡 3</1label> 
</div> 
<div class="cs-panel"> 
<div class="cs-panel-1i"> 面 板 内 容 1</div> 
<div class="cs-panel-1i"> 面 板 内 容 2</div> 
<div class="cs-panel-1i"> 面 板 内 容 3</div> 
</div> 
</div> 


























: checked 伪 类 实现 的 选项 卡 效果 和 普通 选项 卡 的 区 别 就 在 于 在 选 
项 卡 元 素 的 前 面 多 了 3 个 默认 隐藏 的 (通过 hidden 属 性 ) 单 选 框 元 素 ， 


这 几 个 元 素 的 id 属 性 值 和 选项 卡 按钮 clabel> 元 素 的 for 属 性 值 正好 对 
应 ， 这 样 点 击 按 钮 就 可 以 触发 单 选 框 元 素 的 选中 行为 ， 从 而 实 
现 :checked 伪 类 匹配。 相关 CSS 代 人 码 如 下 : 


/* 默认 选项 卡 按钮 样式 */ 
.CS-tab-1i { 
display: inline-block; 
background-color: #f6fef0; 
color: #333; 
padding: 5px 16pX; 
} 
/* 选中 后 的 选项 卡 按钮 样式 */ 
:first-child:checked ~ .cs-tab .cs-tab-1i:first-child， 
:checked + input + .cs-tab .cs-tab-li:nth-of-type(2), 
:checked + .cs-tab .cs-tab-li:nth-of-type(3) { 
background-color: deepskyblue; 
color: #fff; 








} 
/* 默认 选项 面板 样式 */ 
.Cs-panel-l1i { 

display: none; 

padding: 26pX; 

border: 1px solid #ccc; 





} 

/* 选中 的 选项 面板 显示 */ 

:first-child:checked ~ .cs-panel .cs-panel-1i:first-child, 
:nth-of-type(2):checked ~ .cs-panel .cs-panel-li:nth-of-type(2), 
:nth-of-type(3):checked ~ .cs-panel .cs-panel-li:nth-of-type(3) { 


display: block; 
} 





例如 ， 点 击 “ 选 项 卡 2”， 将 出 现 如 图 9-22 所 示 的 效 末 。 


选项 卡 1 草 2350 之 届 选项 卡 3 


面板 内 容 2 





图 9-22 ”选中 “选项 卡 2” 的 效果 截图 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-2.php 或 扫描 
下 面 的 二 维 码 杀 自 体验 与 学 习 。 








在 实际 开发 中 ， 我 们 可 以 让 HTML 结 构 变 得 足够 扁平 ， 这 可 以 大 大 
减少 CSS 代 码 量 。 这 里 的 例子 是 直接 按照 最 难 模式 实现 的 。 





立足 于 实际 开发 


上 面 这 两 个 简单 的 例子 都 使 用 了 <1Labe1> 元 素 ， 只 要 <Labe1> 元 素 
的 for 属 性 值 和 单 复 选 框 的 id 一 致 ， 点 击 <Llabe1> 元 素 就 等 同 于 点 击 单 
复 选 框 ， 从 而 实现 我 们 想 要 的 效果 。 














但 实际 上 <label&gt 元 素 并 不 是 单 复 选 框 元 系 显 隐 技 术 实 现 的 必 选 
项 ， 使 用 <labe1l> 元 系 的 最 大 优点 是 可 以 将 单 选 复 选 元 素 放 置 在 页 面 的 
任意 位 置 ， 实 现 更 加 灵活 ， 但 在 有 些 场合 下 这 些 并 不 是 最 佳 的 实现 方 
Ta 





下 面 是 我 的 一 些 经 验 之 谈 ， 很 重要 。 





虽然 用 单 复 选 框 技术 可 以 实现 展开 收 起 效果、 选项 卡 效 果 ， 甚 至 树 





形 结构 效果 ， 但 是 ， 不 要 在 实际 项 目 中 这 么 做 ， 因 为 这 并 不 是 最 佳 的 实 
现 方式 。 展 开 和 收 起 效果 〈 树 形 结构 的 本 质 也 是 展开 和 收 起 ) 的 最 佳 实 
现 方 式 是 使 用 <details> 和 <summary> 元 素 技 术 ， 其 次 是 JavaScript， 再 
接 下 来 才 是 单 复 选 框 显 隐 技 术 。 对 于 展开 和 收 起 效 末 ， 单 复 选 框 显 隐 技 
术 只 能 算 不 符合 语义 的 奇 技 淫 巧 。 











再 说 选项 卡 效果 。 用 单 复 选 框 显 隐 技术 实现 选项 卡 效果 也 是 不 可 取 
的 ， 因 为 它 的 语义 很 糟 焙 ， 维 护 也 是 一 个 问题 ， 且 没有 记忆 功能 。 最 好 
的 实现 方式 是 先 使 用 :target 伪 类 实现 选项 卡 切换 效果 ， 这 是 一 种 纯 
CSS 实 现 方法 ， 然 后 再 使 用 JavaScript 方 法 实现 选项 卡 切换 效果 ， 同 时 让 
CSS 切 换 选 项 卡 的 效果 失效 ， 使 CSS 切 换 效 果 失 效 的 方法 很 简单 ， 点 击 
选项 卡 对 应 的 <a> 元 素 按钮 时 阻 上 <a> 元 素 默 认 的 跳 转 行为 即 可 。 此 
时 ， 就 算 用 户 禁用 了 JavaScript， 或 者 JavaScript 加 载 缓慢 ， 又 或 者 
JavaScript 运 行 错误 中 止 了 ， 也 不 会 影响 选项 卡 正 党 的 切换 功能 ， 因 为 有 
纯 CSS 实 现 的 选项 卡 技 术 兜 底 。 


那 什 么 场景 才 适 合 单 复 选 框 显 隐 技术 呢 ? 其 实 非常 非常 多 ， 如 目 定 
义 单 复 选 枉 、 开 关 效 果 、 图 片 或 者 列表 的 选择 等 。 这 些 场景 有 一 个 共同 
特点 ， 那 就 是 点 击 的 交互 元 素 束 是 我 们 需要 选择 的 对 象 。 从 技术 角度 来 
讲 ， 融 是 可 以 不 借助 <labe1> 元 素 ， 直 接 将 单 复 选 框 元 素 透 明度 
opacity:6 审 盖 在 选择 元 素 上 也 能 实现 交互 功能 的 场景 。 








单 复 选 框 元 素 技 术 通 常 有 3 种 实现 集 略 : 一 种 是 <label> 元 系 关 
联 ， 一 种 是 将 蛙 复 选 框 元 系 窗 盖 在 目标 元 素 上 ， 还 有 一 种 是 同时 使 用 这 
两 种 方式 。 但 从 功能 上 讲 ， 采 用 第 一 种 方式 来 实现 就 够 了 ， 但 如 果 还 要 














考虑 无 障碍 访问 ， 尤 其 移动 端 〈 屏 幕 阅读 软件 基于 触摸 识别 ) ， 如 果 
DOM 结 构 合 适 ， 建 议 使 用 有 履 盖 实现 。 


接 下 来 ， 我 将 展示 大 干 与 单 复 选 框 技术 有 关 的 最 佳 实践 案例 。 


(1) 自 定义 单 复 选 框 


浏览 器 原生 的 蛙 复 选 框 常常 和 设计 风格 不 搭 ， 需 要 上 自 定 义 ， 最 好 的 
实现 方法 就 是 借助 原生 单 复 选 框 再 配合 其 他 伪 类 ，HITML 结 构 如 下 : 




















<-- 原生 单 选 框 ， 写 在 前 面 --> 
<input type="radio" id="radio"> 


<-- label 元 素 模拟 单 选 框 --> 

















<label for="radio" class="cs-radio"></label> 
<-- 单 选 文案 --> 
<label for="radio"> 单 选项 </Labe1> 





下 面 是 CSS 部 分 : 




















/*#+ 设 置 单 选 框 透 明度 为 6 并 履 盖 其 他 元 素 */ 
[type=" radio"] { 
position: absolute; 
width: 26px; height: 26pX; 
opacity: 8; 
cursor: pointer; 














} 

/* 自 定义 单 选 框 样式 */ 
.CSs-radio {} 

/* 选中 状态 下 的 单 选 框 样式 */ 
:checked + .cs-radio {} 

/* 聚焦 状态 下 的 单 选 框 样式 */ 
:focus + .cs-radio {} 

/* 禁用 状态 下 的 单 选 框 样式 */ 


:disabled + .cs-radio {} 





























自 定义 单 选 框 很 简单 ， 使 用 CSS border-radius 画 个 圆 就 可 以 了 。 


图 9-23 展 示 的 就 是 实现 的 单 选 框 的 不 同 状 态 效果 。 


(@) 单 选项 1 
单 选 项 2 
单 选项 disabled 
单 选 项 checked + disabled 


图 9-23 ”最 终 实现 的 单 选 框 的 不 同 状 态 效果 


复 选 框 的 实现 与 单 选 框 类 似 ， 其 HTML 结 构 如 下 : 




















<-- 复 选 枉 ， 写 在 前 面 --> 
<input type="checkbox" id="checkbox"> 
<-- label 元 素 模拟 复 选 框 --> 








<label for="checkbox" class="cs-radio"></label> 
<-- 复 选 文案 --> 
<label for="checkbox"> 复 选项 </1label> 





下 面 是 CSS 部 分 


/* 设置 复 选 框 透 明度 为 6 并 覆盖 其 他 元 素 */ 
[type="checkbox"] { 
position: absolute; 
width: 26px; height: 26pX; 
opacity: 8; 
cursor: pointer; 


} 

/* 自 定义 单 选 框 样式 */ 
.CS-Checkbox {} 

/* 选中 状态 下 的 单 选 框 样式 */ 
:checked + .cs-checkbox {} 
/* 聚焦 状态 下 的 单 选 框 样式 */ 
:focus + .cs-checkbox {} 

/* 禁用 状态 下 的 单 选 框 样式 */ 
:disabled + .cs-checkbox {} 
































其 中 ， 选 中 状态 打 钩 的 图 形 可 以 使 用 相 邻 两 侧 边 框 外 加 45? 旋 转 实 





现 ， 图 9-24 展 示 的 就 是 最 终 实 现 的 复 选 框 的 状态 效果 截图 。 


先 
复 选 项 disabled 
复 选 项 checked + disabled 

















图 9-24 最终 实现 的 复 选 框 的 不 同 状态 效果 截图 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-3.php 或 扫描 





下 面 的 二 维 码 杀 目 体验 与 学 习 。 





(2) 开关 六 宁 
图 9-25 是 一 个 闻 见 的 开关 效 末 ， 其 本 质 上 就 是 一 个 复 选 框 ， 分 
为 “打开 ”和 “关闭 ”两 个 状态 。 


下 


图 9-25 ”开关 按钮 的 各 个 状态 效果 








开关 效果 的 实现 原理 和 目 定 义 复 选 框 类 似 ， 其 HIML 人 代码 如 下 : 

















<-- 复 选 框 ， 写 在 前 面 --> 
<input type="checkbox" id="switch"> 











<-- 1abel 元 素 模 拟 开 关 状 态 --> 


<label class="cs-switch" for="switch"></label> 





CSS 如 下 图形 绘制 细节 略 〉》: 


[type="checkbox"] { 
width: 44px; height: 26px; 
position: absolute; 
opacity: 6; margin: ©; 
cursor: pointer; 


} 

/* 开关 样式 */ 

.CSs-switch {} 

/* 按 下 状态 */ 
:active:not(:disabled) + .cs-switch {} 
/* 选中 状态 */ 

:checked + .cs-switch {} 

/* 键盘 聚焦 状态 */ 
:focus-visible + .cs-switch {} 
/* 禁用 状态 */ 

:disabled + .cs-switch {} 











读者 可 以 手动 输入 https:/demo.cssworld.cn/selector9/2-4.php 或 扫描 
下 面 的 三 维 人 码 杀 自体 验 与 学 习 。 











仔细 观察 上 面 展示 的 自 定义 单 复 选 框 效 末 和 开关 按钮 效果 的 原生 单 
复 选 框 相关 的 CSS 源 码 ， 会 发 现 采 用 的 是 设置 单 复 选 框 的 透明 度 为 0 并 
履 闸 其 他 元 素 的 方法 实现 的 。 但 这 样 的 实现 方法 有 一 个 不 足 ， 即 不 同 模 
拟 元 素 的 尺寸 是 不 一 样 的 ， 所 以 这 种 窗 冀 方法 的 CSS 代 码 无 法 在 全 局 一 
次 性 设置 ， 并 非 完 美 ， 除 非 外 面包 右 一 层 容 器 ， 百 分 之 百 禾 盖 ， 但 这 样 
增加 了 DOM 复 杂 度 。 











所 以 ， 我 的 实际 开发 建议 有 以 下 几 条 。 


。 如 果 你 开发 的 是 移动 端 项 目 ， 设 置 透明 度 为 0 并 和 宪 盖 其 他 元 素 的 方 
法 是 上 上 之 选 ， 那 就 委 届 点 HTML， 让 元 素 单 复 选 框 和 模拟 元 素 一 
起 包 于 在 一 个 祖先 容器 中 。 设 置 祖先 容器 position:relative， 
这 样 就 可 以 实现 单 选 框 复 选 框 隐 藏 代码 整 站 通用 ，CSS 如 下 : 











[type="checkbox" |]， 
[type="radio"] { 


position: absolute; 

left: 6; top: 8; 

width: 166%; height: 166%; 
opacity: 6; margin: ©; 





。 如 条 你 开发 的 是 桌面 端 传统 网 页 ， 用 户 群 对 外 且 广 泛 ， 则 可 以 使 用 
下 面 整 站 通用 的 隐藏 方法 : 
[type="checkbox"]， 


[type=" radio"] { 
position: absolute; 


clip: rect(60 60 0 08); 
} 








。 如 果 你 开发 的 是 中 后 台 管 理 系统 或 者 内 部 实验 性 质 项 目 ， 这 些 项 目 
不 需要 什么 无 障碍 访问 支持 ， 则 CSS 痢 不 需要 ， 在 写 单 复 选 框 代码 





时 直接 加 一 个 hidden 属 性 隐藏 就 可 以 了 ， 例 如 对 于 开关 按钮 效 
果 ， 其 HTML 代 码 如 下 : 


<-- 复 选 枉 ，hidden 隐 藏 --> 
<input type="checkbox" id="switch" hidden> 


<-- label 元 素 模 拟 开 关 状 态 --> 


<label class="cs-switch" for="switch"></label> 





:focus 状 态 样 式 也 可 以 省 挥 。 





所 以 ， 大 家 可 以 根据 上 自己 的 实际 项 目 场景 ， 选 择 最 合适 的 实现 方 


(3) 标签 /列表 /素材 的 选择 
选择 标签 /列表 /素材 这 类 交互 比较 隐蔽 ， 因 为 长 相 和 单 复 选 框 的 锚 
异 很 大 ， 很 多 开发 者 通常 想不到 使 用 单 复 选 框 匹配 技术 来 实现 。 实 际 


上 ， 无 论 是 单 选 还 是 多 选 ， 无 论 是 选择 标签 还 是 选择 图 案 ， 都 可 以 借 
助 :checked 伪 类 纯 CSS 实 现 。 





例如 ， 一 个 常见 的 标签 选择 功能 一 次 使 用 茶 产 品 的 时 
候 会 让 用 户 选 择 自己 感 兴趣 的 话题 ， 这 本 质 上 就 是 一 些 复 选 框 ， 于 是 我 
们 只 需要 将 clabel> 作 为 标签 元 紊 ， 再 通过 for 属 性 和 隐藏 的 复 选 框 产 
生 关 联 就 可 以 实现 我 们 想 要 的 交互 效果 了 ，HTML 如 下 : 











<input type="checkbox" id="topic1l"> 
<label for="topic1" class="cs-topic"> 科 技 </1abel> 
<input type="checkbox" id="topic2"> 





<label for="topic2"” class="cs-topic"> 体 育 </1label> 


CSS 实 现 原理 如 下 : 


/* 默认 */ 
.CS-topic { 
border: 1px solid silver; 


} 
/* 标签 元 素 选中 后 */ 


:checked + .cs-topic { 
border-color: deepskyblue; 
background-color: azure; 


} 





可 以 实现 类 似 图 9-26 所 示 的 效果 。 


图 9-26 ”标签 元 素 默认 状态 和 选中 状态 实现 效果 


这 种 基于 [type="checkbox"] 元 素 的 实现 除了 实现 简单 外 ， 还 有 
另外 一 个 好 处 就 是 ， 在 我 们 想 知道 哪些 元 素 被 选中 的 时 候 ， 无 须 一 个 一 
个 去 过 历 ， 直 接 利 用 <form> 元 素 内 置 的 或 JavaScript 框 架 内 置 的 表单 序 
列 化 方法 进行 提 区 惑 可 以 了 。 


不 仅 如 此 ， 配 合 CSS 计 数 器 ， 我 们 还 可 以 不 使 用 JavaScript 而 直接 显 
示 选 中 的 标签 元 素 的 个 数 ， 代 码 示意 如 下 : 





<p> 您 已 选择 <span class="cs-topic-counter"></span> 个 话题 。</p> 
body { 
counter-reset: topicCounter; 
} 
:checked + .cs-topic { 
counter-increment: topicCounter; 


} 


.CS-topic-counter::before { 
content: counter(topicCounter ) ; 


} 





效果 如 图 9-27 所 示 。 


请 选择 你 感 兴趣 的 话题 : 


您 已 选择 3 个 话题 。 








图 9-27 _ CSS 计数 器 显示 选中 标签 元 素 个 数 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-5.php 或 扫描 
下 面 的 二 维 码 杀 自 体验 与 学 习 。 














接 下 来 我 们 再 看 一 个 直接 选择 图 像 的 例子 ， 这 类 场景 也 很 常见 ， 如 
图 像 识别 验证 码 的 选择 吕 或 者 图 像素 材 的 选择 ， 它 们 的 实现 是 类 似 的 。 


图 9-28 给 出 的 是 一 个 壁纸 素材 的 选择 效果 ， 其 本 质 上 就 是 一 个 单 选 
框 选项 ， 于 是 ， 我 们 可 以 借助 [type="radio"] 元 素 和 :checked 伪 类 实 
现 。 


请 选择 壁纸 : 





图 9-28 ”壁纸 素材 的 选择 效果 
HTML 结 构 如 下 : 


<input type="radio" id="wallpaper1" name="wallpaper" checked> 
<label for="wallpaper1" class="cs-wallpaper"> 
<img src="1.jpg" class="cs-wallpaper-img"> 
</label> 
<input type="radio" id="wallpaper2" name="wallpaper"> 
<label for="wallpaper2" class="cs-wallpaper"> 
<img src="2.jpg" class="cs-wallpaper-img"> 
</1label> 





CSS 实 现 原 理 如 下 : 





/* 默认 */ 

.Cs-wallpaper { 
display: inline-block; 
position: relative; 

} 

/* 选中 后 显示 边框 */ 


:checked + .cs-wallpaper::before { 








content: 


position: absolute; 
left: 6; right: 68; top: 6; bottom: ©; 
border: 2px solid deepskyblue; 


} 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-5.php 或 扫描 
下 面 的 二 维 码 杀 自体 验 与 学 习 。 


of 








9.2.2 ”不 确定 值 伪 类 :indeterminate 





复 选 框 元 素 除 了 选中 和 没 选中 的 状态 外 ， 还 有 半 选 状态 ， 半 选 状 态 
多 用 在 包含 全 选 功能 的 列表 中 。 没 有 原生 的 HIML 属 性 可 以 设置 半 选 状 
态 ， 半 选 状态 只 能 通过 JavaScript 进 行 设置 ， 这 一 点 和 全 选 不 一 样 〈 全 选 
有 checked 属 性 ) 。 





// 设置 checkbox 元 素 为 半 选 状态 





checkbox.indeterminate = true; 


:indeterminate 伪 类 顾名思义 束 是 “不 确定 伪 类 ”， 由 于 平常 只 在 
复 选 枉 中 有 应 用 ， 因 此 很 多 人 会 误 认 为 :indeterminate 伪 类 只 可 以 匹 
配 复 选 框 ， 但 实际 上 还 可 以 匹配 单 选 框 和 进度 条 元 素 <progress>。 








下 面 我 们 一 起 看 一 下 :indeterminate 伪 类 在 这 3 类 元 素 中 的 表现 。 
1. :indeterminate 伪 类 与 复 选 框 


不 同 浏览 器 下 复 选 框 的 半 选 状态 的 样式 是 不 一 样 的 ，Chrome 浏 览 
器 下 是 短 横 线 ，Firefox 浏 览 器 下 是 蓝 色 渐变 大 方块 ，IE 浏 览 器 下 则 是 黑 
色 小 方块 。 由 于 使 用 Chrome 浏 览 器 的 用 户 占 比 最 大 ， 因 此 如 果 大 家 想 
要 借助 原生 复 选 框 元 素 自 定义 复 选 框 的 半 选 状态 ， 我 个 人 推荐 使 用 
Chrome 浏 览 器 的 短 横 线 样式 效果 。 











短 横 线 的 形状 就 是 一 个 矩形 小 方块 ， 它 的 实现 很 简单 ，CSS 示 意 如 
下 : 


:indeterminate + .cs-checkbox::before { 
content: ""; 
display: block; 


width: 8px; 
border-bottom: 2px solid; 
margin: 7px auto 6; 





眼见 为 实 ， 读 者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2- 
6.php 或 扫描 下 面 的 二 维 码 杀 自体 验 与 学 习 。 








最 终 模 拟 的 复 选 框 半 选 状态 的 对 比 效果 如 图 9-29 所 示 。 


1. 原生 复 选 框 2. 让 定义 复 法 框 
= 第 1 列 第 2 列 [| 第 1 列 第 2 列 
Y 数据 1-1 数据 1-2 四 数据 1-1 数据 1-2 
数据 2-1 数据 2-2 [ 数据 2-1 数据 2-2 
Y 数据 3-1 数据 3-2 四 数据 3-1 数据 3-2 

















图 9-29 “Chrome 浏览 器 下 复 选 框 原生 半 选 和 自 定 义 半 选 效果 对 比 


复 选 框 元 素 的 半 选 伪 类 :indeterminate 从 IE9 浏 览 器 就 开始 支持 
了 ， 因 此 可 以 放心 使 用 。 


2. :indeterminate 伪 类 与 单 选 框 





对 于 单 选 框 元 素 ， 当 所 有 name 属 性 值 一 样 的 单 选 框 都 没有 被 选中 的 
时 候 会 匹配 :indeterminate 伪 类 ; 如 果 单 选 框 元 素 没有 设置 name 属 性 
值 ， 则 其 上 自身 没有 被 选中 的 时 候 也 会 匹配 :indeterminate 伪 类 。 


例如 : 


:indeterminate + label { 
background: skyblue; 


} 


<input type="radio" name="radio"><label> 文 案 1</1label> 
<input type="radio" name="radio"><label> 文 案 2</1label> 
<input type="radio" name="radio"><label> 文 案 3</1label> 
<input type="radio" name="radio"><label> 文 案 4</1label> 





此 时 总 共有 4 个 name 属 性 值 都 是 "radio" 的 单 选 杠 ， 默 认 没 有 一 个 
被 选中 ， 此 时 这 4 个 单 选 框 都 匹配 :indeterminate 伪 类 ，<1Labe1> 元 素 


的 背景 色 表 现 为 天 蓝 色 ， 如 图 9-30 所 示 。 





图 9-30 全 部 单 选 框 匹配 :indeterminate 伪 类 





接 下 来 ， 只 要 任意 一 个 单 选 框 被 选中 ， 所 有 单 选 框 元 素 都 会 丢失 
对 :indeterminate 伪 类 的 匹配 ， 文 案 后 面 的 背景 色 消 失 ， 如 图 9-31 所 
示 。 


文案 1 
9 文案 2 
文案 3 
文宗 4 


图 9-31 全 部 单 选 框 失去 对 :indeterminate 伪 类 的 匹配 





这 个 伪 类 可 以 用 来 提示 用 户 尚 未 选择 任何 单 选项 ， 如 采用 户 有 选中 
单 选项 ， 则 提示 上 自动 消失 ， 示 意 代码 如 下 : 





:indeterminate ~ .cs-valid-tips::before { 
content: "您 尚未 选择 任何 选项 "; 








color: red; 
font-size: 87.5%; 





} 


为 排除 干扰 ， 方 便 学 习 ， 这 里 只 展现 核心 HTML: 





<input type=" radio” id="radio1l" name="radio"> 
<label for="radio1"> 单 选项 1</1label> 
<input type="radio" id="radio2" name="radio"> 
<label for="radio2"> 单 选项 2</1label> 
<input type="radio" id="radio3" name="radio"> 














<label for="radio3"> 单 选项 3</1label> 








<- ba 这 里 显示 提示 信息 J -> 
<p class="cs-valid-tips"></p> 





用 户 疝 未 选中 任何 选项 时 候 的 样式 如 图 9-32 所 示 。 选 中 选项 后 ， 红 
色 的 提示 文案 消失 ， 如 图 9-33 所 示 。 
单 选项 1 


单 选项 2 
单 选项 3 


您 尚未 丢 择 任 何 丢 项 





图 9-32 未 选中 任何 选项 时 出 现 提 示 文 案 


单 选项 1 
(@) 单 选项 2 
单 选项 3 





图 9-33 ”选中 选项 后 提示 文案 自动 消失 








读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/2-7.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








但 单 选 框 元 素 的 :indeterminate 伪 类 匹配 有 一 个 缺陷 ， 那 就 是 IE 





浏览 器 (包括 Edge〉 并 不 支持 ， 使 用 时 需要 注意 兼容 性 问题 。 
3. :indeterminate 伪 类 与 progress 元 素 


对 于 <progress> 元 素 ， 当 没有 设置 值 的 时 候 ， 它 会 匹 
配 :indeterminate 伪 类 。 例 如 : 


progress:indeterminate { 
background-color: deepskyblue; 


box-shadow: 6 6 6 2px blactk; 
} 





结果 ， 下 面 两 段 HTML 的 表现 就 出 现 了 差异 


<progress min="1”max="166"></progress> 


<progress min="1”max="166”Vvalue="56"></progress> 





图 9-34 展 示 的 是 上 述 代 码 在 Firefox 浏 览 器 下 的 表现 。 可 以 看 到 ， 
有 设置 value 属 性 值 的 <progress> 元 素 匹 配 了 : 和 
而 设置 了 value 属 性 值 的 <progress> 元 系 则 没有 匹配 :indeterminate 


| IE 
图 9-34 不 确定 状态 与 <progress> 元 素 匹 配 示意 


<progress> 元 素 的 :indeterminate 伪 类 匹配 是 从 IE10 浏 览 器 开始 
文 持 的 。 


9.3 输入 值 验证 





本 节 介 绍 的 众多 伪 类 是 与 表单 元 素 的 验证 相关 的 ， 熟 练 掌握 它们 可 
以 简化 我 们 的 开发 ， 因 为 输入 值 的 合法 性 验证 判断 直接 交 给 了 浏览 器 。 











输入 值 验 证 这 类 伪 类 是 随 着 HTML5 表 单 新 特性 一 起 产生 的 ， 
HTML5 表 单 新 特性 有 很 多 ， 包 括 新 增 的 required 和 pattern 等 验证 相 
关 属 性 ， 以 及 min 和 max 等 范围 相关  ” 属性。 


HTML5 表 单 新 特性 从 正 10 浏 览 器 才 开 始 文 持 ， 因 此 这 些 输入 值 验 
证 伪 类 的 兼容 性 都 要 在 正 10 及 以 上 版 本 的 浏览 器 中 才 受 支持 ， 目 前 只 能 
应 用 于 在 兼容 性 要 求 不 高 的 项 目 中 。 











9.3.1 有 效 性 验证 伪 类 :valid 和 :invalid 


先 看 一 段 H8TML: 


验证 码 : <input required pattern="\w{4,6}"> 





这 是 一 个 验证 码 输 入 框 ， 这 个 输入 框 必 填 ， 同 时 要 求 验 证 码 为 4 一 6 
个 种 规 字 符 。 现 在 有 如 下 CSS: 


input:Vvalid { 
background-color: green; 
color: #fff; 

} 


input:invalid { 
border: 2px solid red; 


} 





则 默认 状态 下 ， 由 于 输入 框 中 没有 值 ， 这 与 required 必 填 验 证 不 
符 ， 将 触 友 :invalid 伪 类 [ 罗 配 ， 输 入 框 表 现 为 2px 大 小 的 红色 边框 ， 如 
图 9-35 所 示 。 


如 果 我 们 在 输入 框 中 输入 任意 4 个 数字 ， 匹 配 pattern 必 性 值 中 的 
正则 表达 式 ， 则 会 触发 :valid 伪 类 匹配 ， 输 入 框 的 背景 色 表 现 为 绿 
色 ， 如 图 9-36 所 示 。 


xirma:C 


图 9-35 :invalid 伪 类 匹配 下 的 红色 边框 





验证 码 : 


图 9-36 ” :valid 伪 类 匹配 下 的 绿色 背景 





以 上 就 是 :valid 伪 类 和 :invalid 伪 类 的 作用 ， 乍 一 看 它们 好 像 还 
挺 实用 的 ， 但 实际 上 这 两 个 特性 并 没有 想象 中 那么 好 用 ， 因 为 :valid 
伪 类 的 匹配 页 面 一 加 载 就 会 被 触发 ， 这 对 用 户 而 言 其 实 是 不 友好 的 。 举 
个 例子 ， 用 户 刚 进入 一 个 登录 界面 ， 还 没 进行 任何 操作 ， 就 显示 大 大 的 
红色 警告 ， 你 输入 不 合法 ， 是 会 吓 着 用 户 的 。 











鉴于 以 上 原因 ， 现 在 新 出 了 一 个 :user-invalid 伪 类 ， 它 需要 用 户 
的 交互 才 触 发 匹配 ， 不 过 目前 :user-invalid 伪 类 的 规范 还 没有 完全 成 
熟 ， 浏 览 器 尚未 支持 ， 无 法 使 用 。 但 没关系 ， 我 们 可 以 辅助 JavaScript 优 
化 :invalid 伪 类 的 验证 体验 。 


请 看 下 面 这 个 可 以 实际 开发 应 用 的 案例 ， 其 HTML 如 下 ; 


<form id="csForm”novalidatey> 
<p> 
验证 人 码 : <input class="cs-input" placeholder= 
4,6}"> 
<span class="cs-valid-tips"></span> 
</p> 
<input type="submit" value=" 提 交 "> 
</form> 





required pattern="\w{ 








上 述 案 例 的 实现 逻辑 为 : 默认 不 开局 验证 ， 当 用 户 产 生 提交 表单 的 
行为 后 ， 通 过 给 表单 元 又 添加 特定 类 名 ， 触 发 浏览 器 内 置 验证 开局， 同 
时 借助 :placeholder-shown 伪 类 细 化 提示 文案 。 





JavaScript 示 意 代 码 如 下 : 


csForm.addEventListener('submit', function (event) { 
this.classList.add('valid'); 
event .preventDefault(); 


}); 





CSS 如 下 : 





.CS-input { 
border: 1px solid gray; 











} 

/* 验证 不 合法 时 边框 为 红色 */ 

.Valid .cs-input:invalid { 
border-color: red; 


} 

/* 验证 全 部 通过 标记 */ 

.Valid .cs-input:valid + .cs-valid-tips::before { 
content: "VvV"; 
color: green; 














} 

/* 验证 不 合法 提示 */ 

.Valid .cs-input:invalid + .cs-valid-tips::before { 
content: "不 符合 要 求 "; 
color: red; 





} 
/* 空 值 提 示 */ 





.Valid .cs-input:placeholder-shown + .cs-valid-tips::before { 
content: "尚未 输入 值 "; 
} 








于 是 可 以 看 到 图 9-37 所 示 的 一 系列 状态 变化 。 





验证 码 尚未 输入 什 
| 提交 | 
-人 依 

验证 码 : 不 符合 要 求 
提交 


验证 码 : | 9527| y 
提交 


验证 码 : | 9527 





提交 


图 9-37 :invalid 伪 类 验证 各 种 状态 效果 示意 





这 个 验证 过 程 和 状态 变化 都 没有 JavaScript 的 参与 ，JavaScript 的 唯 
一 作用 就 是 赋予 一 个 开始 验证 的 标志 量 类 名 。 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/3-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 





有 人 可 能 会 产生 疑问 : 如 何 才 能 知道 所 有 表单 元 素 都 验证 通过 呢 ? 
可 以 使 用 <form> 元 素 原生 的 checkValidity() 方 法 ， 返 回 整个 表单 是 
否 验 证 通过 的 布尔 值 。 


csForm.addEventListener('submit', function (event) { 
this.classList.add('valid'); 
// 判断 表单 全 部 验证 通过 
if (this.checkValidity && this.checkValidity() == true) { 
console.1log(' 表 单 验 证 通过 ' ) ; 
// 这 里 可 以 执行 表单 ajax 提交 了 
} 
event .preventDefault(); 
}); 



































另外 ， 如 果 希 望 表单 元 素 的 验证 效果 是 即时 的 ， 而 非 表 单 提交 后 再 
验证 ， 给 <form> 元 素 绑 定 '" input ' 输 入 事件 ， 并 给 对 应 的 target 对 象 
设置 启动 CSS 验 证 标志 量 即 可 。 例 如 : 


csForm.addEventListener('input', function (event) { 
event.target.classList.add('valid'); 


}); 





IE 浏 览 器 有 一 个 严重 的 演 染 bug， 对 于 输入 框 元 素 ，: ijnvalid 等 伪 
类 只 会 实时 匹配 输入 框 元 素 自 喘 ， 而 输入 框 后 面 的 兄 第 元 素 样 式 不 会 重 
绘 ， 于 是 我 们 会 发 现 ， 明 明 输 入 的 值 已 经 合法 了 ， 输 入 框 的 红色 边框 也 








消失 了 ， 但 是 输入 框 后 面 的 错误 提示 文字 却 一 直 存 在 ， 如 图 9-38 所 示 。 


验证 吗 :| 。 ”| Fe 要 求 < 一 没有 问 是 
验证 三 : | 12345g| x 不 符合 要 求 所 有 问题 ,给 入 


枢 样 式 合法 ， 
提交 但 后 面 错误 





图 9-38 ”IE 演 染 bug 示 意 
IE 浏 览 器 下 这 类 重 绘 bug 层 见 不 鲜 ， 但 修复 方法 很 简单 ， 触 发 重 绘 


即 可 。 可 以 改变 父 元 素 的 样式 ， 或 者 设置 无 关 紧 要 的 类 名 ， 下 面 是 我 写 
的 补丁 ， 将 它 放 在 页 面 的 任意 位 置 即 可 : 











// IE 触 发 重 绘 的 补丁 
if (typeof document.msHidden != 'undefined' || !history.pushstate) { 
document.addEventListener('input', function (event) { 
if (event.target && /^input|textarea$/i.test(event.target.tagName)) 





{ 


event.target.parentElement.className = event.target.parentElement 
.ClassName; 


} 
}); 





} 





图 9-39 展 示 的 就 是 放置 了 修复 补丁 后 的 泻 染 效果 ， 可 以 看 到 输入 杠 
的 值 合法 时 ， 输 入 框 后 面 的 提示 信息 同步 变化 了 。 





验证 码 :| 123456| x V 





提交 


图 9-39 ”修复 IE 泻 染 bug 后 的 效果 示意 


最 后 一 个 小 知识 点 就 是 :invalid 伪 类 还 可 以 直接 匹配 <form> 元 
素 。 例 如 : 


form: :invalid { 
outline: 1px solid red; 


} 

但 是 正 浏 览 器 并 不 支持 <form> 元 素 匹 配 :invalid 伪 类 。 

另外 ，:valid 和 :invalid 伪 类 还 可 以 用 来 区 分 正 10 及 其 以 上 版 本 
的 浏览 器 。 


.CS-Cl { /* IE9 及 IE9- */ } 
.CS-C1，div:valid { /* IE16 及 IE16+ */} 


9.3.2 ”范围 验证 伪 类 :in-range 和 :out-of- 
range 


:in-range 和 :out-of-range 伪 类 与 nin 属 性 和 max 属 性 密切 相 
关 ， 因 此 这 两 个 伪 类 常用 来 匹配 "number ' 类 型 的 输入 框 或 "range ' 类 
型 的 输入 框 。 例 如 : 


<inputtype="number"min="1"max="10606"> 


<inputtype="range"min="1"max="1060"> 





即 输入 框 的 最 小 值 是 1， 最 大 值 是 100。 此 时 ， 如 果 输 入 框 的 值 不 在 
这 个 范围 ， 则 会 匹配 
:oUt-of-range 伪 类 ; 如 果 输 入 框 的 值 在 这 个 范围 内 ， 则 匹配 :in- 
range 伪 类 ， 测 试 CSS 如 下 : 





input:in-range{outline:2pxdashedgreen;} 





input:out-of-range{outline:2pxsolidred;} 


此 时 输入 框 的 轮廓 为 绿色 虚 框 ， 如 图 9-40 所 示 。 


图 9-40 ”虚线 轮廓 截图 示意 


如 果 我 们 使 用 JavaScript 改 变 输 入 框 的 值 为 200 (超过 max 属 性 的 限 
制 值 ) ， 或 者 直接 设置 value 属 性 值 为 286， 如 下 : 


<input type="number" min="1" max="10606" value="2060"> 





<input type="range" min="1" max="1606" value="2860"> 


则 最 终 的 输入 框 表现 为 "number" 类 型 的 输入 框 匹 配 :out-of- 
range 伪 类 而 表现 为 红色 实 线 轮廓 ， 而 "range" 类 型 的 输入 框 依然 是 绿 
色 虚 框 ， 如 图 9-41 所 示 。 


图 9-41 ” 实 线 轮廓 和 虚线 轮 廊 截图 示意 


这 是 因为 浏览 器 对 "range" 类 型 的 输入 框 目 动 做 了 区 域 范围 限制 


(因为 涉及 滑 杆 的 定位 〉， 无 论 是 Chrome 浏 览 器 还 是 Firefox 浏 览 器 ， 都 
是 这 种 表现 。 例 如 : 


range.value = 2080; 








// 输出 结果 是 '166， 
console.log(range.value); 








因此 ， 实 际 开 发 的 时 候 ， 并 不 存在 需要 使 用 范围 验证 伪 类 匹 
配 "range" 类 型 输入 框 的 场景 ， 因 为 范围 验证 伪 类 一 定 会 匹配 。 有 使 用 
必要 的 场景 包括 数值 输入 框 和 时 间 相 关 输 入 框 ， 如 下 : 





<1-- 数值 类 型 --> 

<input type="number"> 

<1-- 时 间 类 型 --> 

<input type="date"> 

<input type="datetime-local"> 
<input type="month"> 

<input type="week"> 

<input type="time"> 





如 果 这 类 输入 框 没有 min 属 性 和 max 属 性 的 限制 ， 则 :in-range 伪 
类 和 out-of-range 伪 类 都 不 会 匹配 。 但 Chrome 浏 览 器 下 有 一 个 特殊 ， 
那 就 是 如 果 value 属 性 值 的 类 型 和 指定 的 type 属 性 值 的 类 型 不 匹配 ， 这 
个 输入 框 居然 也 会 匹配 :in-range 伪 类 。 例 如 : 


<input type="number" value="a"> 





匹配 证 据 如 图 9-42 所 示 。 


pxinput id="number™” type="number™" 





input:in-range { 
outline:r 2px dashed 图 green; 


Value ="a"; .</input> 





图 9-42 ”不 合法 属性 值 依然 匹配 :in-range 伪 类 证 据 





不 过 实际 开发 中 ， 很 少 使 用 :in-range 伪 类 ， 而 :out-of-range 伪 
类 的 使 用 较 多 ， 同 时 大 家 也 不 会 故意 设置 不 合法 的 数值 ， 因 此 这 种 细节 
了 解 即 可 。 


此 外 ，:out-of-range 仿 类 还 可 以 配合 :invalid 伪 类 验证 细 化 我 
们 输入 框 出 错时 的 提示 信息 。 例 如 : 


.Valid .cs-input:out-of-range + .cs-valid-tips::before { 
content: "超出 范围 限制 "; 





color: red; 





注意 ，IE 浏 览 器 不 支持 :in-range 伪 类 和 :out-of-range 伪 类 。 


9.3.3 ”可 选 性 伪 类 :required 和 :optional 





:required 伪 类 用 来 匹配 设置 了 required 属 性 的 表单 元 素 ， 表 示 
这 个 表单 元 素 必 填 或 者 必 写 。 例 如 : 





<input required> 

<select required> 
<option value=""> 请 选择 </option> 
<option value="1"> 选 项 1</option> 


<option value="2"> 选 项 2</option> 
</select> 
<input type="radio" required> 
<input type="checkbox" required> 








以 上 4 个 表单 元 素 均 可 以 匹配 :required 伪 类 。 例 如 : 


:required { 
box-shadow: 6 6 6 2px green; 
} 


结果 都 呈现 出 了 绿色 的 线 框 ， 如 图 9-43 所 示 。 
口 
口 


图 9-43 :required 伪 类 匹配 示意 


:optional 伪 类 可 以 看 成 是 :required 伪 类 的 对 立 面 ， 只 要 表单 元 
素 没 有 设置 required 属 性 ， 都 可 以 匹配 :optional 伪 类 ， 甚 至 
<button> 按 钮 也 可 以 匹配 。 例 如 : 


:optional { 
box-shadow: 6 6 6 2px red; 


} 
<button> 按 钮 </button> 
<input type="submit"” value=" 按 钮 "> 





这 两 种 写法 的 按钮 元 素 都 呈现 出 红色 的 线 框 ， 如 图 9-44 所 示 。 





图 9-44”:optional 伪 类 [| 匹配 示意 





还 值得 一 提 的 是 单 选 框 元 素 的 :required 伪 类 匹配 。 虽 然 单 选 框 元 


素 的 :required 伪 类 匹配 和 :invalid 伪 类 匹配 机 制 有 巨大 差异 ， 但 很 
多 人 会 误 认 为 它们 是 一 样 的 。 


对 于 :invalid 伪 类 ， 只 要 其 中 一 个 单 选 框 设置 了 required 属 性 ， 
整个 单 选 框 组 中 的 所 有 单 选 框 元 素 都 会 匹配 :invalid 伪 类 ， 这 会 导致 
同时 验证 通过 或 验证 不 通过 ; 但是， 如 果 是 :required 伪 类 ， 则 只 会 匹 
es 用 示例 说 话 : 


[type="radio"] :required { 
box-shadow: 6 6 6 2px deepskyblue; 
} 
[type="radio"]:invalid { 
outline: 2px dashed red; 
outline-offset: 4px; 


} 
<input type="radio" name="required" required> 
<input type="radio" name="required"> 
<input type="radio" name="required"> 
<input type="radio" name="required"> 





结果 第 一 个 设置 了 required 属 性 的 单 选 框 有 两 层 轮 万， 其 他 只 
配 :invalid 伪 类 的 单 选 框 只 有 一 层 轮廓 ， 如 图 9-45 所 示 。 








图 9-45 ” 单 选 框 组 匹配 :required 伪 类 和 :invalid 伪 类 的 差异 





实际 应 用 


长 久 以 来 ， 输 入 框 是 必 填 还 是 可 选 的， 样式 上 没有 区 别 ， 只 有 蔡 
状态 才 有 ， 我 们 通常 的 做 法 都 是 使 用 额外 的 字符 进行 标记 。 


例如 使 用 一 个 红色 星 号 标记 该 输入 框 是 必 填 的 ， 或 者 直接 使 用 中 
文 “ 可 选 ?来 标记 这 个 输入 框 是 可 以 不 填 的 ， 因 此 ， 实 际 开 发 
中 ，:required 伪 类 和 :optional 伪 类 都 是 通 








素 的 样式 来 标记 表单 元 系 的 可 选 性 。 


eb 
看 到 每 个 问题 的 标题 的 最 后 都 标记 了 “ 必 选 ”还 
案 是 CSS 根 据 HTML 表 单元 素 设 置 的 属性 自动 生成 的 。 





: 


问卷 调查 


你 从 事前 端 几 年 了 ? ( 必 选 ) 一 
1-3 年 目 3-5 年 目 5 年 以 上 


2. 你 每 周 多 少 业 余 时 间 用 来 学 习 前 端 技 


图 9-46” 纯 CSS 标 记 “ 必 选 ”* 还 是 “可 选 * 案 例 截 图 


术 ? ( 必 选 ) 和 一 一 
1-3 小 时 电 3-5 小 时 昌 5 小 时 以 上 


， 你 每 年 买 多 少 本 前 端 相关 书籍 ? ( 必 


选 ) 委 一 一 
1-3 本 @ 3-5 本 @ 5 本 以 上 


， 有 什么 其 他 想 说 的 ?( 可 选 ) 


过 兄 第 选择 符 控 制 兄 第 元 


不 是 是 “可 选 ”， 











相关 实现 颇 有 技术 含量 ， 大 家 可 以 耐心 看 看 代码 ， 说 不 定 可 以 学 到 
很 多 其 他 CSS 技 术 。 





首先 是 HTML 部 分 ， 和 传统 实现 不 同 ， 我 们 需要 把 标题 元 素 放 在 表 
单元 系 的 后 面 ， 这 样 才 能 使 用 兄 第 选择 符 进 行 控 制 ， 具 体 如 下 : 


<form> 
<fieldset> 
<legend> 问 卷 调查 </legend> 
<ol class="cs-ques-ul"> 
<1i class="cs-ques-1i"> 
<input type="radio" name="ques1" required>1-3 年 
<input type="radio" name="ques1">3-5 年 
<input type="radio"” name="ques1">5 年 以 上 
<!-- 标题 放 在 后 面 --> 
<h4 class="cs-caption"> 你 从 事前 端 几 年 了 ? </h4> 
</1i> 

















<1i class="cs-ques-1i"> 
<textarea></textarea> 
<1-- 标题 放 在 后 面 --> 
<h4 class="cs-caption"> 有 什么 其 他 想 说 的 ? </h4> 
</1i> 
</o1> 
<p><input type="submit"” value=" 提 交 "></p> 
</fieldset> 
</form> 











高 能 的 CSS 来 了 ， 考 验 布局 能 力 的 时 候 到 了 ， 如 何 让 在 后 面 的 .cs- 
caption 元 素 在 上 面 显 示 呢 ? 由 于 这 里 标签 受 限 ， 因 此 ， 使 用 Flex 布 局 
有 些 困难 。 实 际 上 有 一 个 IE8 浏 览 器 也 支持 的 CSS 声 明 可 以 改变 DOM 元 
素 的 上 下 呈现 位 置 ， 这 个 CSS 声 明 束 是 display:table-caption，CSS 
如 下 : 














.Cs-ques-1i { 
display: table; 
width: 166%; 


} 

.CS-Caption { 
display: table-caption; 
/* 标题 显示 在 上 方 */ 











caption-side: top; 


} 





由 于 <1i> 元 素 设置 了 display:table， 重 置 了 浏览 器 内 置 的 
display:1ist-item， 因 此 ， 列 表 前 面 的 数字 序号 就 无 法 显示 ， 但 没 
关系 ， 我 们 可 以 借助 CSS 计 数 器 重 现 序号 匹配 ， 这 也 是 从 下 8 浏览 器 就 
开始 文 持 的 ， 代 码 如 下 : 








.Cs-ques-ul { 
counter-reset: quesIndex; 

} 

.Cs-ques-1i::before { 
counter-increment: quesIndex; 
content: counter(quesIndex) "."; 
/* 序号 定位 */ 
position: absolute; top: -.75em; 
margin: 6 6 6 -26px; 

} 





最 后 就 很 简单 了 ， 基 于 :optional 伪 类 和 :required 伪 类 在 .cs- 
caption 元 素 最 后 标记 可 行 性 。CSS 如 下 : 





:optional ~ .cs-caption::after { 
content: "”( 可 选 ) "; 
color: gray 


} 


:required ~ .cs-caption::after { 
content: "”( 必 选 ) "; 
color: red; 





可 见 ， 借 助 3 个 CSS 高 级 技巧 实现 了 我 们 的 可 选 性 自动 标记 效果 ， 
以 后 要 想 修 改 可 选 性 ， 只 需要 修改 表单 元 系 的 required 属 性 即 可 ， 文 


案 信 息 上 自动 同步 ， 维 护 更 简单 。 


完整 CSS 如 下 : 








/* 标题 在 上 方 显示 */ 

.CSs-ques-1i { 
display: table; 
width: 166%; 








} 

.CS-Caption { 
display: table-caption; 
caption-side: top; 





} 

/* 自 定义 列表 序号 */ 

.CSs-ques-ul { 
counter-reset: quesIndex; 

} 

.CSs-ques-1i { 
position: relative; 

} 

.CSs-ques-1i::before { 
counter-increment: quesIndex; 
content: counter(quesIndex) "."; 
position: absolute; top: -.75em; 
margin: 6 6 6 -26px; 


} 
/* 显示 对 应 的 可 选 性 文案 与 颜色 */ 
:optional ~ .cs-caption::after { 
content: " (可 选 ) "; 
color: gray 


} 

:required ~ .cs-caption::after { 
content: "”( 必 选 ) "; 
color: red; 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/9/3-2.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








9.3.4 用 户 交 互 伪 类 :user-invalid 和 空 值 伪 
类 :blank 


:user-invalid 伪 类 和 :blank 伪 类 是 非常 新 且 尚 未 成 熟 的 盆 类 ， 


这 里 就 鹤 灾 几 笔 带 过 。 








:user-invalid 伪 类 用 于 匹配 用 户 输入 不 正确 的 元 系 ， 但 只 有 在 用 
户 与 它 进 行 了 显著 交互 之 后 才 进 行 匹配 。:user-invalid 伪 类 必须 在 用 
户 答 试 提交 表单 和 用 户 再 次 与 表单 元 素 交 互 之 前 匹配 。 目 前 浏览 器 实现 
存疑 ， 实 际 开 发 请 使 用 :valid 伪 类 和 JavaScript 代 码 配 合 实现 。 








:blank 仿 类 的 规范 也 是 多 变 的 ， 一 开始 是 可 以 匹配 衬 标 签 元 素 
《可 以 有 空格 ) ， 现 在 变 成 匹配 没有 输入 值 的 表单 元 素 。 等 这 个 伪 类 成 
熟 后 ， 我 将 再 对 其 进行 介绍 。 如 果 想 要 匹配 空 值 表单 元 素 ， 请 使 
用 :placeholder-shown 伪 类 代 蔡 〈 设 置 placeholder 属 性 值 为 空 
格 ) 。 








[1] :read-write 伪 类 在 Firefox 浏 览 器 下 可 以 作用 于 


contentediabled="true" 的 元 素 ， 由 于 非 标准 ， 且 无 实用 价值 ， 故 不 
对 其 进行 介绍 


[2] 比较 经 典 的 图 像 识别 验证 码 就 是 在 一 系列 图 片 中 选择 包含 公交 车 的 
图 片 。 


第 10 章 ” 树 结构 仿 闫 





本 章 将 介绍 DOM 树 结构 查询 伪 类 ， 这 关 伪 类 虽然 名 为 伪 类 ， 但 行 
6 普通 选择 堪 。 本 章 中 出 现 的 伪 类 的 使 用 频率 可 能 会 有 关 
， 但 这 些 伪 类 都 是 很 实用 的 。 





本 章 介 绍 的 所 有 伪 类 IE9 及 以 上 版 本 的 浏览 器 都 是 支持 的 ， 成 熟 且 
特性 稳定 ， 可 以 放心 使 用 。 


10.1 :root 伪 类 


: root 伪 类 表示 文档 根 元 素 ，IE9 及 以 上 版 本 的 浏览 器 支持 该 伪 类 。 
10.1.1 :root 伪 类 和 <html> 元 素 


在 XHTMIL 或 者 HTML 页 面 中 ，:root 伪 类 表示 的 就 是 <html> 元 


这 很 好 证 明 ， 给 <htm1> 元 素 加 一 个 类 名 ， 如 下 : 


<html class="html"></html> 


此 时 ,设置 一 个 背景 色 就 可 以 看 到 整个 页 面 的 背景 色 变 成 天 蓝 色 


:root.html { background: skyblue; } 


或 者 直接 使 用 html 标 签 也 可 以 证 明 : 


html:root { background: skyblue; } 


那么 问题 来 了 ，html 标 签 选择 右 也 匹配 <html> 元 素 ， 那 这 两 个 选 
择 右 有 什么 区 别 吗 ? 


区 别 肯 定 是 有 的 : 首先 ，: root 伪 类 的 优先 级 更 高 ， 毕 葛 伪 类 的 优 
先 级 比 标签 选择 器 的 优先 级 要 高 一 个 层级 ， 其 次 ， 对 于 :root，IE9 及 以 
上 版 本 的 浏览 器 才 支 持 ， 它 的 兼容 性 要 进 于 htm1 标 签 选择 器 ;最 
后 ，: root 指 所 有 XML 格式 文档 的 根 元 素 ，XHTML 文 档 只 是 其 中 一 
种 。 例 如 ， 在 SVG 中 ，: root 就 不 等 同 于 htm1 标 签 了 ， 而 是 其 他 标签 。 











在 Shadow DOM 中 虽然 也 有 根 的 概念 〈 称 为 shadowRoot) ， 但 并 不 
能 匹配 : root 伪 类 ， 也 就 是 在 Shadow DOM 中 ，: root 伪 类 是 无 效 的 ， 
应 该 使 用 专门 为 此 场景 设计 的 :host 伪 类 。 


10.1.2 :root 伪 类 的 应 用 场景 


由 于 html 标 签 选择 占 的 莱 容 性 更 好 ， 优 先 级 更 低 ， 因 此 日 第 开发 中 
没有 必要 使 用 : root 伪 类 ， 直 接 使 用 htm1 标 签 选择 器 即 可 。 


但 下 面 要 介绍 的 这 两 个 开发 场景 则 更 推荐 使 用 : root 伪 类 。 





1， 深 动 条 出 现 页 面 不 跳动 








桌面 端 网 页 的 主体 内 容 多 采用 水 平 居中 布局 ， 类 似 下 面 这 样 〈 取 自 
2019 年 的 淘宝 痛 页 〉: 


.layer { 
width: 1196pX 
margin: 6 auto; 


} 





则 页 面 加 载 或 者 交互 变化 导致 页 面 高 度 超过 一 屏 的 时 候 ， 页 面 就 会 
有 一 个 从 无 滚动 条 到 有 滚动 条 的 变化 过 程 。 而 在 Windows 系 统 下 ， 所 有 
浏览 器 的 默认 演 动 条 都 占据 17px 宽 度 ， 深 动 条 的 出 现 必然 导致 页 面 的 可 
用 客 度 变 小 ， 震 要 重新 计算 主体 模块 的 大 中 定位 ， 导 致 内 容 友 生 偏 移 ， 
页 面 会 突然 跳动 ， 体 验 很 不 好 。 











常见 做 法 是 下 面 这 样 的 : 


html { 
overflow-y: scroll; 
} 


但 这 会 让 高 度 不 足 一 屏 的 页 面 的 右 侧 也 显示 滚动 条 的 轨道 ， 并 不 完 





还 有 一 种 方法 是 外 部 再 能 套 一 层 <div> 元 系 ， 再 设置 


.layer-outer { 
margin-left: calc(100vw - 1068%); 


padding-left: calc(166vw - 166%) ; 
} 


166vw 是 包含 滚动 条 的 宽度 ，166% 宽 度 的 计算 值 不 包含 滚动 条 ， 所 
以 calc(166vw - 166%) 的 计算 值 承 是 页 面 的 滚动 条 宽度 。 这 
样 ，.1ayer 的 左右 居中 定位 一 定 是 绝对 居中 的 。 








不 过 这 种 方法 还 是 有 瑕 辛 ， 当 浏览 器 冤 度 比较 小 的 时 候 ， 左 侧 留 的 
日 明显 比 右 边 多 ， 这 会 有 些 奇 怪 ， 但 这 一 点 可 以 通过 但 询 语 句 进 行 优 
化 : 














@media screen and (min-width: 1196px) { 
.layer-outer { 


margin-left: calc(1660vw - 166%) ; 


} 
} 








这 种 方法 的 力 外 一 个 不 足 束 是 需要 调整 HTML 结 构 ， 一 个 网 站 有 这 
么 多 页 面 ， 如 果 主 体 结构 没有 公用 ， 修 改 的 成 本 很 高 。 


现在 ， 轮 到 另外 一 种 更 好 的 方法 出 场 了 : 


ES 二 / 
html { 

overflow-y: scroll; 
} 
/* IE9+ */ 
:root { 

overflow-x: hidden; 


} 
:root body { 
position: absolute; 
width: 106vw; 
overflow: hidden; 


} 





上 述 CSS 代 码 做 的 事情 很 简单 ， 就 是 让 IE8 浏 览 器 使 用 旧 的 直接 预 
留 深 动 区 域 的 方法 ，IE9 及 以 上 版 本 的 浏览 器 直接 让 居中 定位 计算 宽度 
一 直 都 不 包含 滚动 条 宽度 ， 这 样 就 一 定 不 会 发 生 跳 动 。 





因为 下 9 及 以 上 版 本 的 浏览 右 才 文 持 vw 单 位 ， 所 以 使 用 了 : root 伪 
类 ， 一 方面 正好 对 页 面 滚动 条 进行 设置 ， 另 一 方面 正好 完美 区 分 了 IE8 
和 IE9 浏 览 器 





在 这 个 CSS 技 巧 中 ，: root 伪 类 的 性 价 比较 高 ， 比 较 适 合 使 用 。 
2. CSS 变 量 


现代 浏览 器 都 已 经 支持 了 CSS 自 定义 属性 (也 就 是 CSS 变 量 ) ， 其 
中 有 一 些 变 量 是 全 局 的 ， 如 整 站 的 颜色 、 主 体 布局 的 尺寸 等 。 对 于 这 些 
变量 ， 业 界 约定 俗 成 ， 都 将 它们 写 在 : root 伪 类 中 ， 虽 然 将 它们 写 
在 html 标 签 选择 器 中 也 一 样 。 





之 所 以 写 在 :root 伪 类 中 ， 是 因为 这 样 做 代码 的 可 读 性 更 好 。 同 样 
是 根 元 素 ，html 选 择 器 负责 样式 ，: root 伪 类 负责 变量 ， 这 一 点 是 约定 





:root { 
/* 颜色 变量 */ 
--blue: #2486fTf; 
--red: #f4615c; 
/* 尺寸 变量 */ 








--layerWidth: 1196px; 


} 
html { 
overflow: auto; 


} 





10.2 :empty 仿 类 


先 来 了 解 一 下 :empty 伪 类 的 基本 匹配 特性 。 








(1) :empty 伪 类 用 来 匹配 空 标签 元 素 。 例 如 : 


<div class="cs-empty"></div> 
.CS-empty:empty { 
width: 126px; 


padding: 26pX; 
border: 16px dashed; 
} 





此 时 ，<div> 元 素 就 会 匹配 :empty 伪 类 ， 呈 现 出 虚线 框 ， 如 图 10-1 
所 示 。 


图 10-1 “<div> 元 素 匹 配 :empty 伪 类 呈现 出 虚线 框 








(2) :empty 伪 类 还 可 以 匹配 前 后 闭合 的 蔡 换 元 素 ， 如 <buttony> 元 
素 和 <textarea> 元 素 。 例 如 : 





<textarea></textarea> 
textarea:empty { 


border: 6px double deepskyblue; 
} 





在 所 有 浏览 右 下 部 呈现 为 双 实 线 ， 如 图 10-2 所 示 。 


图 10-2 :empty 伪 类 匹配 <textarea> 和 截图 





在 正 浏览 器 下 ，<textarea> 元 素 的 :empty 伪 类 匹配 有 一 些 非 常 奇 
怪 的 特性 。 


首先 ， 如 果 输 入 文字 内 容 ， 则 下 浏览 器 认为 <textarea> 元 素 并 非 
空 标签 ， 不 会 匹配 :empty 伪 类 。 例 如 ， 我 随便 输入 “文字 ”， 结 果 在 正 浏 
览 右 下 <textarea> 元 素 的 边框 样式 从 双 实 线 还 原 成 了 初始 状态 ， 如 图 


10-3 所 示 。 


文字 | IE 输入 文字 后 


图 10-3” 正 浏览 器 下 输入 值 的 <textarea> 不 匹配 :empty 伪 类 


其 次 ， 当 <textarea> 元 素 的 placeholder 属 性 值 显 示 的 时 候 ，IE 
浏览 器 也 不 会 匹配 :empty 伪 类 。 例 如 ，HTML 如 下 : 


<textarea placeholder=" 请 输入 姓名 "></textarea> 


其 交互 状态 如 图 10-4 所 示 。 








请 葵 闪 姓名 和 -一 默认 没有 区 本 














图 10-4” 王 浏览 器 下 显示 placeholder 属 性 值 的 <textarea> 不 匹配 :empty 伪 类 





还 记 不 记得 我 们 在 9.1.3 节 中 曾 借 助 :placeholder-shown 伪 类 判断 
输入 框 的 值 是 人 否 为 空 ， 这 很 好 用 ， 但 是 了 正 浏览 器 不 兼容 。 没 关系 ， 对 于 
<textarea> 元 素 ， 正 浏览 器 也 有 了 空 值 史 配方 法 ， 那 就 是 借助 :empty 
伪 类 。HTML 如 下 : 


<textarea placeholder=" "></textarea><span></span> 
CSS 代 码 为 : 


/* IE 浏览 器 */ 

textarea:not(:empty) + span::before { 
content: "V”; 
color: green; 


} 

/* 其 他 浏览 

textarea:not(: 0 + span::before { 
content: "VvV"; 
color: green; 





男 外 ，IE 浏 览 器 还 需要 触发 重 绘 的 JavaScript 代 码 补丁 ， 与 9.3.1 节 中 
提 到 的 补丁 一 模 一 样 ， 这 里 不 再 重复 展示 了 。 





本 示例 配 有 演示 页 面 ， 读 者 可 以 手动 输入 
https://demo.cssworld.cn/selector/10/2-1.php 亲 自体 验 与 学 习 。 








当然 ， 实 际 开 发 中 还 是 直接 使 用 :invalid 伪 类 更 合适 ， 这 里 这 种 
利用 缺陷 实现 的 技巧 只 能 说 它 有 趣 但 不 能 说 它 实 用 。 





(3) :empty 伪 类 还 可 以 匹配 非 财 合 元 素 ， 如 <input> 元 
素 、<img> 元 素 和 <hr> 元 素 等 。 例 如 : 


input :empty, 
img:empty, 
hr:empty { 
border: 6px double deepskyblue; 


} 

<input type="text"” placeholder=" 请 输入 姓名 "> 
<img src="./1.jpg"> 

<hr> 





在 所 有 浏览 器 中 的 效果 如 图 10-5 所 示 。 


<— <input> 


< 和 一 一 <img> 





= ==3 < 《hry 


图 10-5” 非 闭合 元 素 匹 配 :empty 伪 类 








但 实际 开发 中 很 少 有 需要 使 用 :empty 伪 类 匹配 非 闭合 元 素 的 场 


有 与. 
Jo 


10.2.1 对 :empty 伪 类 可 能 的 误解 


什么 样 的 元 素 可 以 匹配 :empty 伪 类 ? 如 果 没 有 深入 研究 ， 你 大 概 
会 认为 没有 任何 子 元 素 、 不 显示 任何 内 容 的 元 素 可 以 匹配 :empty 伪 
类 。 但 如 果 深 入 到 细节 ， 就 会 发 现 这 种 粗浅 的 理解 会 给 我 们 带 来 误解 。 





1. :empty 伪 类 与 空格 








如 果 问 知 元 素 内 有 注释 ， 是 否 可 以 匹配 :empty 伪 类 ? 多 数 人 会 觉 
得 不 会 匹配 ， 这 是 完全 正确 的 。 例 如 : 


<1-- 无 法 匹配 :empty 伪 类 --> 








<div class="cs-empty"><1-- 注释 --></div> 








但 如 果 问 耕 元 系 里 面 有 一 个 空格 或 者 标签 有 换行 呢 ? 这 时 很 多 人 就 
会 有 错误 的 认识 了 。 实 际 上 ， 依 然 无 法 匹配 :empty 伪 类 。 例 如 ， 有 以 
下 几 种 情况 。 


<!-- 无 法 匹配 :empty 伪 类 --> 


<div class="cs-empty"> </div> 


<1-- 无 法 匹配 :empty 伪 类 -- 
<div class="cs-empty"> 
</div> 





因此 ， 实 际 开发 的 时 候 ， 如 果 遇 到 :empty 伪 类 无 效 的 场景 ， 要 仔 
细 查 看 HTML 代 码 ， 看 看 标签 内 是 否 有 空格 或 者 换行 。 








:empty 伪 类 忽略 空格 的 特性 不 符合 我 们 的 直观 认 知 ，W3C 官 方 也 
收集 到 了 很 多 这 样 的 意见 ， 所 以 在 CSS 选 择 器 Level 4 规范 中 己 经 开始 明 
确 :empty 伪 类 可 以 匹配 只 有 空格 文本 节点 的 元 素 ， 但 是 直到 我 写本 章 
的 时 候 还 没有 任何 浏览 器 支持 ， 因 此 ， 安 全 起 见 ， 实 际 开发 大 家 还 是 按 
照 无 空格 标准 来 进行 。 











Firefox 浏 览 器 中 有 一 个 私有 伪 类 可 以 让 元 素 匹 配 空 标签 元 素 或 带 有 
空格 的 标签 元 素 ， 这 个 伪 类 就 是 :-moz-only-whitespace。 例 如 : 


.Cs-empty:-moz-only-whitespace { 
border: 16pXx dotted; 
} 


是 可 以 匹配 下 面 的 HTML 的 : 


<1-- Firefox 可 以 匹配 :empty 伪 类 --> 





<div class="cs-empty"> </div> 


但 毕竟 Firefox 浏 览 器 市 场 份额 有 限 ， 大 家 了 解 即 可 。 





最 后 一 点 ， 没 有 闭合 标签 的 闭合 元 系 也 无 法 匹配 :empty 伪 类 ， 浏 
览 露 会 目 动 补 全 HIML 标 签 。 例 如 ， 段 落 元 素 可 以 直接 写成 : 





<p> 段 落 
<p> 段 落 
<p> 段 落 





这 样 写 解析 没有 任何 问题 。 下 面 问 题 来 了 ， 如 果 标 签 里 面 没 有 任何 
其 他 内 容 ， 例 如 : 


<p class="cs-empty"> 





<p class="cs-other"> 


结果 .cs-empty 也 无 法 匹配 :empty 伪 类 : 





<1-- .cs-empty 无 法 匹配 :empty 伪 类 --> 


<p class="cs-empty"> 
<p class="cs-other"> 





因为 浏览 右上 自动 补 全 的 内 容 将 一 直 延 伸 到 下 一 个 标签 元 素 的 开头 ， 
所 以 这 里 的 .cs-empty 元 素 实际 上 包含 了 换行 符 ， 等 同 于 下 面 这 种 写 
Qs 


<p class="cs-empty"> 





</p><p class="cs-other"> 


也 可 以 使 用 JavaScript 验 证 上 面 的 结论 : 


document .querySelector(' .cs-empty').innerHTML 
// 结果 是 回 车 符 





因此 ， 如 采 想 要 目 动 补 全 标签 匹配 :empty 伪 类 ， 需 要 首尾 相连 


这 样 : 


<!-- .cs-empty 可 以 匹配 :empty 伪 类 --> 


<p class="cs-empty"><p 
class="cs-other"> 





2. :empty 伪 类 与 : :before/ : :after 伪 元 素 


: :before 和 : :after 伪 元 素 可 以 给 标签 插入 内 容 、 图 形 ， 但 这 会 
不 会 影响 :empty 伪 类 的 匹配 呢 ? 答案 是 : 不 会 。 例 如 : 


.CS-empty: :before { 
content : “我 是 一 段 文字 ' ; 
} 
.CS-empty:empty { 
border: 16px dotted deepskyblue; 


} 
<1-- 可 以 匹配 :empty 伪 类 --> 


<div class="cs-empty"></div> 





虽然 我 们 在 .cs-empty 的 元 素 内 部 插入 了 一 段 文本 ， 但 是 浏 览 器 依 
然 按 照 :empty 伪 类 进行 了 泻 染 ， 如 图 10-6 所 示 。 
SO 和 909090 


© 
。 我 是 - 段 文字 。。 
S 


图 10-6 ”应 用 了 : :before 伪 元 素 ， 但 依然 匹配 :empty 伪 类 





这 一 特性 非常 实用 。 


10.2.2 超 实 用 超 高 频 使 用 的 :empty 伪 类 





无 论 是 大 项 目 还 是 小 项 目 ， 它 们 一 定 都 会 用 到 :empty 伪 类 。 主 要 
有 下 面 儿 种 场景 。 





1. 隐藏 空 元 素 


例如 ， 茶 个 模块 里 面 的 内 容 是 动态 的 ， 可 能 是 列表 ， 也 可 能 是 按 





钮 ， 这 些 模 块 容器 党 包含 影响 布局 的 CSS 属 性 ， 如 margin、padding 属 
性 等 。 当 然 ， 这 些 模块 里 面 有 内 容 的 时 候 ， 布 局 显示 效果 是 非常 好 的 ， 
然而 一 旦 这 些 模块 里 面 的 内 容 为 空 ， 页 面 上 就 会 有 一 块 很 大 的 明显 的 空 
白 ， 效 果 就 不 好 ， 这 种 情况 下 使 用 :empty 伪 类 控制 一 下 就 再 好 不 过 
了 : 


.CS-module:empty { 
display: none; 
} 


无 有 顷 额 外 的 JavaScript 逻 辑 判 新， 直接 使 用 CSS 束 可 以 实现 动态 样式 
效果 ， 唯 一 需要 注意 的 是 ， 当 列表 内 容 缺 失 的 时 候 ， 一 定 要 把 空格 也 去 
掉 ， 和 否则 :empty 伪 类 不 会 匹配 。 














2. 字段 缺失 智能 提示 


例如 ， 下 面 的 HTML: 


<d]> 
<dt> 姓 名 : </dt> 
<dd> 张 三 </dd> 
<dt> 性 别 : </dt> 
<dd></dd> 





<dt> 手 机 : </dt> 

<dd></dd> 

<dt> 邮 箱 : </dt> 

<dd></dd> 
</dl> 











用 户 的 某 些 信息 字段 是 缺失 的 ， 此 时 开发 人 员 应 该 使 用 其 他 占 位 字 
符 示 意 这 里 没有 内 容 ， 如 短 横 线 (-) 或 者 直接 使 用 文字 提示 。 但 多 年 
的 开发 经 验 告诉 我 ， 开 发 人 员 非 常 容 易 筷 记 这 里 的 特殊 处 理 ， 最 终 导致 














布局 混乱 ， 信 息 难 异 。 




















/* “dd> 为 空 布局 会 
dt { 


float: left; 
} 





但 如 今 ， 我 们 束 不 用 担心 这 样 的 合作 问题 了， 直接 使 用 CSS 束 可 以 
处 理 这 种 情况 ， 代 码 很 简单 : 


dd:empty: :before { 
content: “和 暂 无 ' ; 





color: gray; 


} 





此 时 字段 缺失 后 的 布局 效果 如 图 10-7 所 示 。 


姓名 : 张 三 
性 别 ， 和 暂 天 
手机 ， 藻 无 
邮箱 : 藻 无 











图 10-7” 空 字段 借助 :empty 伪 类 和 : :before 伪 元 素 占 位 


可 以 看 到 ， 这 样 的 布局 效果 良好 ， 信 息 清 晰 。 存 储 的 是 什么 数据 内 
容 ， 直 接 和 输出 什么 内 容 就 可 以 ， 葡 算数 据 库 中 存储 的 是 空 字符 也 无 须 担 
心 。 








实际 开发 中 ， 类 似 的 场景 还 有 很 多 。 例 如 ， 表 格 中 的 备注 信息 经 闻 
都 是 空 的 ， 此 时 可 以 这 样 处 理 : 





td:empty: :before { 
content: '-'; 
color: gray; 


| 
除 此 之 外 ， 还 有 一 类 典型 场景 需要 用 到 :empty 伪 类 ， 那 就 是 动态 

Ajax 加 载 数据 为 空 的 情况 。 当 一 个 新 用 户 进入 一 个 产品 的 时 候 ， 很 多 模 

块 内 容 是 没有 的 。 要 是 在 过 去 ， 我 们 需要 在 JavaScript 代 码 中 做 if 判 

岂 ， 如 果 没 有 值 ， 我 们 要 吐出 “没有 结果 ”或 者 “没有 数据 ”的 信息 。 但 是 

现在 ， 有 了 :empty 伪 类 ， 直 接 把 这 个 工作 交 给 CSS 就 可 以 了 。 例 如 : 





.Cs-search-module:empty::before { 
content: ' 没 有 搜索 结果 '; 
display: block; 











line-height: 3606px; 
text-align: center; 
color: gray; 





又 如 : 


.Cs-article-module:empty::before { 
content: ' 您 还 没有 发 表 任 何 文 章 '; 
display: block; 
line-height: 3606px; 
text-align: center; 
color: gray; 














这 种 方法 非常 好 用 ， 可 以 节约 大 量 的 开 及 时间， 同时 体验 更 
二 因为 可 以 使 用 一 个 通用 类 名 使 整 站 提示 信息 保持 统 








.CS-empty:empty: :before { 
content: ' 暂 无 数据 '; 
display: block; 
line-height: 3606px; 
text-align: center; 
color: gray; 





1 | 
10.3 子 索 引 伪 类 





本 节 要 介绍 的 伪 类 都 是 用 来 匹配 子 元 素 的 ， 必 须 是 独立 标签 的 元 
素 ， 文 本 节点 、 注 释 市 上 是 无 法 匹配 的 。 


如 果 想 要 [匹配 文字 ， 只 有 ::first-line 和 : :first-letter 两 个 
伪 元 素 可 以 实现 ， 有 旦 只 有 部 分 CSS 属 性 可 以 应 用 ， 这 里 不 展开 介绍 。 


10.3.1 :first-child 伪 类 和 :last-child 伪 类 
:first-child 伪 类 可 以 匹配 第 一 个 子 元 素 ，:1last-child 伪 类 可 


以 匹配 最 后 一 个 子 元 素 。 例 如 : 


ol > :first-child { 
font-weight: bold; 
color: deepskyblue; 


} 
ol > :last-child { 
font-style: italic; 


color: red; 

} 

<01> 
<1i> 内 容 </1i> 
<1i> 内 容 </1i> 
<1i> 内 容 </1i> 

</ol1> 





结果 第 一 项 内 容 表 现 为 天 蓝 色 加 粗 ， 最 一 项 内 容 表现 为 倾斜 红色 ， 
如 图 10-8 所 示 。 


1. 内 容 
2 内 容 
, 内 容 


tay 




















图 10-8 :first-child 和 :1ast-child 的 基本 作用 示意 





虽然 :first-child 和 :1ast-child 伪 类 的 含义 首尾 呼应 ， 但 这 两 
个 伪 类 并 不 是 同时 出 现 的 ，: first-child 的 出 现 要 早 好 多 年 ，IE7 浏 览 
器 就 开始 支持 ， 而 :1ast-child 伪 类 是 在 CSS3 时 代 出 现 的 ，IE9 浏 览 器 
才 开 始 文 持 。 因 此 ， 对 于 更 面 端 项 目 ， 在 :first-chil1d 伪 类 和 :1ast- 
child 伪 类 都 可 以 使 用 的 情况 下 ， 优 先 使 用 :first-child 伪 类 。 例 
如 ， 若 想 列表 上 下 都 有 28px 的 间距 ， 则 下 面 两 种 实现 都 是 可 以 的 : 





li { 
margin-top: 28px; 


i :first-child { 
margin-top: 6; 


i 1{ 
margin-bottom: 26px; 


i:last-child { 
margin-top: 6; 








但 建议 优先 使 用 第 一 种 写法 。 如 果 你 的 项 目 不 需 要 兼容 下 8 浏览 
絮 ， 我 不 推荐 你 使 用 后 面 一 种 写法 ， 建 议 使 用 :not 伪 类 (参见 第 11 
章 ) ?9 加: 


li:not(:last-child) { 
margin-bottom: 26px; 


} 





10.3.2 ” :only-child 伪 类 





:only-child 也 是 一 个 很 给 力 的 伪 类 ， 尤 其 在 处 理 动态 数据 的 时 
候 ， 可 以 省 去 很 多 写 JavaScript 远 辑 的 成 本 。 


我 们 先 来 看 一 下 这 个 伪 类 的 基本 含义 ，:only-child， 顾 名 思 义 ， 
就 是 匹配 没有 任何 兄弟 元 素 的 元 素 。 例 如 ， 下 面 的 <p> 元 素 可 以 匹 
配 :only-child 伪 类 ， 因 为 其 前 后 没有 其 他 兄弟 元 素 : 





<div class="cs-confirm"> 
<1-- 可 以 匹配 :only-child 伪 类 --> 


<p class="cs-confirm-p"> 确 定 删 除 该 内 容 ? </p> 
</divy> 





另外 ，:only-chil1d 伪 类 在 匹配 的 时 候 会 忽略 前 后 的 文本 内 容 。 例 
如 : 


<button class="cs-button"> 
<1-- 可 以 匹配 :only-child 伪 类 --> 


<i class="icon icon-delete"></i> 删 除 
</button> 











虽然 .icon 元 素 后 面 有 “删除 ”文字 ， 但 由 于 没有 标签 散 套 ， 是 匿名 
文本 ， 因 此 不 影响 .icon 元 素 匹 配 :only-chil1d 伪 类 。 








尤其 需要 使 用 :only-child 的 场景 是 动态 场景 ， 也 就 是 某 个 固定 小 
模块 ， 根 据 场景 的 不 同 ， 里 面 可 能 是 一 个 子 元 素 ， 也 可 能 是 多 个 子 元 
素 ， 元 素 个 数 不 同 ， 布 局 方式 也 不 同 ， 此 时 就 是 :only-child 伪 类 大 放 
异彩 的 时 候 。 例 如 ， 某 个 加 载 (loading) 模块 里 面 可 能 就 只 有 一 张 加 载 











图 片 ， 也 可 能 仅仅 就 是 一 段 加载 描 述 文 字 ， 也 可 能 是 加 载 图 片 和 加 载 文 
字 同 时 出 现 ， 此 时 :only-child 伪 类 就 非常 好 用 。 


HTML 示 意 如 下 : 


<!-- 1。 只 有 加 载 图 片 --> 
<div class="cs-loading"> 
<img src="./loading.png" class="cs-loading-img"> 
</div> 
<1-- 2. 只 有 加 载 文 字 --> 
<div class="cs-loading"> 
<p class="cs-loading-p"> 正 在 加 载 中 .. .</p> 
</div> 
<1-- 3. 加 载 图 片 和 加 载 文 字 同 时 存在 --> 
<div class="cs-loading"> 
<img src="./loading.png" class="cs-loading-img"> 
<p class="cs-loading-p"> 正 在 加 载 中 .. .</p> 
</div> 



































我 们 无 须 在 父 元 素 上 专门 指定 额外 的 类 名 来 控制 不 同 状 态 的 样式 ， 
直接 活用 :only- child 伪 类 就 可 以 让 各 种 状态 下 的 布局 都 民 好 : 





.Cs-loading { 
height: 156pX; 
position: relative; 
text-align: center; 
/* 与 效果 无 关 ， 截 图 示意 用 */ 
border: 1px dotted; 
} 
/* 图 片 和 文字 同时 存在 时 在 中 间 留 点 间距 */ 
.Cs-loading-img { 
width: 32px; height: 32px; 
margin-top: 45px; 
vertical-align: bottom; 
} 
.CSs-loading-p { 
margin: .5em 6 0; 
color: gray 











} 
/* 当 只 有 图 片 的 时 候 居 中 绝对 定位 */ 
.Cs-loading-img:only-child { 











position: absolute; 
left: 6; right: 68; top: 6; bottom: 6; 
margin: auto; 























} 
/* 当 只 有 文字 的 时 候 行 高 近似 垂直 居中 */ 
.Cs-loading-p:only-child { 

margin: 0@; 

line-height: 156pX 











} 





可 以 得 到 图 10-9 所 示 的 布局 效果 。 


1. 只 有 加 载 图 片 


正在 加 载 中 .… 


图 10-9 :only-chil1d 仿 类 实现 多 种 状态 加 载 布局 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/10/3-1.php 或 扫描 





下 面 的 二 维 码 杀 上 自体 验 与 学 习 。 





10.3.3 :nth-child() 伪 类 和 :nth-1last- 
child() 伪 类 


:nth-last-child() 伪 类 和 :nth-child() 伪 类 的 区 别 在 
于 ，:nth-last-child( ) 伪 类 是 从 后 面 开 始 按 指定 序号 匹配 ， 而 :nth- 
child() 仿 类 是 从 前 面 开始 匹配 。 除 此 之 外 ， 两 者 没有 其 他 区 别 ， 无 论 
是 在 兼容 性 还 是 语法 方面 。 因 此 ， 本 节 会 以 :nth-child( ) 为 代表 对 这 
两 个 伪 类 进行 详细 且 深 入 的 介绍 。 





1. 从 :nth-child() 开 始 说 


在 介绍 语法 之 前 ， 有 必要 提 一 句 ，:nth-child( ) 伪 类 虽然 功能 很 
强大 ， 但 只 适用 于 内 容 动 态 、 无 法 确定 的 匹配 场景 。 如 果 数 据 是 纯 静 态 
的 ， 哪 怕 是 列表 ， 都 请 使 用 类 名 或 者 属性 选择 器 进行 下 配 。 例 如 : 





<01> 
<1li class="cs-li cs-1i-1"> 内 容 </1iy> 
<1li class="cs-li cs-1i-2"> 内 容 </1i> 
<1li class="cs-li cs-1i-3"> 内 容 </1i> 


</ol1> 

没有 必要 使 用 1i:nth-child(1)、1i:nth-child(2) 和 1i:nth- 
child(3)， 因 为 这 样 会 增加 选择 器 的 优先 级 ， 且 DOM 结 构 严 格 匹配 ， 
无 法 随意 调整 ， 不 利于 维护 。 





:nth-child() 伪 类 可 以 匹配 指定 索引 序号 的 元 素 ， 文 持 一 个 参 
数 ， 且 参数 必须 有 ， 参 数 可 以 是 关键 字 值 或 者 图 数 符号 这 两 种 类 型 。 


(1) 关键 字 值 的 形式 如 下 。 





。odd: 匹配 第 奇数 个 元 素 ， 如 第 1 个 元 素 ， 第 3 个 元 素 ， 第 5 个 元 
= 

。 even: 匹配 第 偶数 个 元 素 ， 如 第 2 个 元 素 ， 第 4 个 元 素 ， 第 6 个 元 
= 





可 以 这 么 记忆 : 如 果 字 和 母 个 数 是 奇数 odd 是 3 个 字母 ，， 那 就 是 匹 
配 奇 数位 数 的 元 素 ; 如 果 字 母 个 数 是 侦 数 个 (even 是 4 个 字母 )， 那 臧 
征 匹配 偶数 位 数 的 元 素 。 





奇偶 匹配 关键 字 多 用 在 列表 或 者 表格 中 ， 可 以 用 来 实现 提升 阅读 体 
验 的 斑马 线 效 果 。 
(2) 图 数 符号 的 形式 如 下 。 


。 An+B: 其 中 A 和 B 都 是 固定 的 数值 ， 且 必须 是 整数 : n 可 以 理解 为 从 
1 开始 的 自然 序列 (0, 1, 2, 3, ...)〉，n 前 面 可 以 有 人 负 号 。 第 一 个 子 元 
素 的 匹配 序号 是 1， 小 于 1 的 计算 序号 都 会 被 忽略 。 





下 面 来 看 一 些 示 例 ， 快 速 了 解 一 下 各 种 类 型 的 参数 的 含义 。 


tr:nth-child(odd): 匹配 表格 的 第 1 3, 5 行 ， 等 同 于 tr:nth- 


child(2n+1 )。 
e。 tr:nth-child(even): 匹配 表格 的 第 2, 4, 6 行 ， 等 同 于 tr:nth- 
child(2n)。 


:nth-child(3): 匹配 第 3 个 元 素 。 

:nth-child(5n): 匹配 第 5, 10, 15, ... 个 元 素 。 其 中 5=5x1， 
10=5x2，15=5x3...... 

:nth-child(3n+4): 匹配 第 4, 7, 10, ... 个 元 素 。 其 中 4=(30)+4，7= 
(31)+4,10=(32)+4...... 

:nth-child(-n+3): 匹配 前 3 个 元 素 。 因 为 
-0+3=3，-1+3=2，-2+3=1。 

li:nth-child(n): 匹配 所 有 的 <1i> 元 素 ， 就 匹配 的 元 素 而 言 和 
li 标签 选择 器 一 模 一 样 ， 区 别 束 是 优先 级 更 高 了 。 实 际 开发 总 是 避 
免 过 高 的 优先 级 ， 因 此 没有 任何 理由 这 么 使 用 。 
li:nth-child(1): 匹配 第 一 个 <1i> 元 素 ， 和 1i:first-chil1d 匹 
配 的 作用 一 样 ， 区 别 就 是 后 者 的 兼容 性 更 好 ， 因 此 ， 也 没有 任何 这 
么 使 用 的 理由 ， 使 用 :first-child 代 蔡 它 。 
1i:nth-child(n+4):nth-child(-n+16): 匹配 第 4 一 10 个 <1i> 
元 素 ， 这 个 就 属于 比较 高 级 的 用 法 了 。 例 如 ， 考 试 成 绩 是 前 3 名 的 
有 徽章 ， 第 4 名 到 第 10 名 高 亮 显示 ， 此 时 ， 这 种 正 负 值 组 合 的 伪 类 
就 非常 好 用 。 








实际 案例 





:nth-chil1d() 适 合用 在 列表 数量 不 可 控 的 场景 下 ， 如 表格 、 列 表 
等 。 下 面 举 3 个 常用 案例 。 


(1) 斑马线 条纹 。 此 效果 多 用 在 密集 型 大 数量 的 列表 或 者 表格 
中 ， 不 容易 看 错 行 ， 通 常设 置 偶数 位 数 的 列表 为 深 色 背景 ， 代 码 示意 如 
i 


table { 
border-spacing: ©; 
width: 3660pX; 
text-align: center; 
border: 1px solid #ccc; 
} 
tr { 
background-color: #fff; 


tr:nth-child(even) { 
background-color: #eee; 


} 





布局 效果 如 图 10-10 所 示 。 


标题 1 标题 2 标题 3 


内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 
内 容 1 内 容 2 内 容 3 














图 10-10 “列表 斑马 线条 纹 效果 


(2) 列表 边缘 对 齐 。 例 如 ， 要 实现 图 10-11 所 示 的 布局 效果 。 如 果 
无 须 兼容 下 浏览 器 ， 最 好 的 实现 方法 是 display :grid 布 局 。 如 果 需 要 
兼容 一 些 老 旧 的 浏览 器 ， 多 半 会 使 用 浮动 或 者 inline-block 排 列 布 
局 ， 此 时 间 隐 的 处 理 就 是 难点 ， 因 为 无 论 是 设置 margin-1left 还 是 
margin-right， 都 无 法 实现 正好 两 端 贴 着 边缘。 








图 10-11 列表 斑马 线条 纹 效果 





使 用 :nth-child() 伪 类 是 比较 容易 理解 和 上 手 的 一 种 方法 ， 假 设 
间 际 固定 为 .8px， 则 CSS 代 码 示意 如 下 : 


li{ 
float: left; 
width: calc((166% - 46px) / 5); 
margin-right: 16px; 


} 
li:nth-child(5n) { 
margin-right: 0; 


} 





或 者 下 面 更 推荐 使 用 的 写法 : 


li ft 
float: left; 
width: calc((166% - 46px) / 5); 


} 

li:not(:nth-child(5n)) { 
margin-right: 16px; 

} 





(3) 固定 区 间 的 列表 高 有 党 。 前 面 提 过 这 个 应 用 ， 例 如 ， 在 展示 考 
试 成 绩 的 列表 中 ， 前 十 名 需要 高 亮 显 示 ， 前 三 名 着 重 高 亮 ， 要 实现 这 样 
的 效果 ， 没 有 比 使 用 :nth-child() 伪 类 更 合适 的 方法 了 。 














CSS 代 码 如 下 : 





前 3 行 背景 色 为 素 色 */ 
:nth-child(-n + 3) td { 
background: bisque; 


4-16 行 背景 色 为 淡 青 色 */ 
:nth-child(n + 4) :nth-child(-n + 16) td { 
background: lightcyan; 





效果 如 图 10-12 所 示 。 


排名 姓名 总 积分 
1 XboxYan 105 
2 liyongleihf2006 78 
3 wingmeng 73 
4 sghweb 71 
5 yaeSakuras 69 
6 frankyeyq 66 
订 lineforone 58 
8 NeilC1991 50 
9 smileyby 49 
10 Iceytea 45 
11 Seasonley 44 
12 ylfeng250 43 
13 Kongdepeng 42 
14 AsyncGuo 40 
15 qianfengg 40 


图 10-12 ”指定 列表 范围 的 背景 色 效果 截图 





读者 可 以 手动 输入 https://demo.cssworld.cn/selector/10/3-2.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








2. 动态 列表 数量 匹配 技术 


聊天 软件 中 的 群 头像 或 者 一 些 书籍 的 分 组 往往 采用 复合 头像 作为 一 
个 大 的 头像 ， 如 图 10-13 所 示 ， 可 以 看 到 头像 数量 不 同 ， 布 局 也 会 不 
同 。 








二 _， 于 台 网 
Re 
声 生 多 浅说 一 


图 10-13 ”头像 数量 不 同 ， 布 局 不 同 





加 过 -4 
本 














通常 大 家 会 使 用 下 面 的 方法 进行 布局 ， 这 确实 是 一 个 不 错 的 方法 : 


class="cs-box" data-number="1"></ul> 
class="cs-box" data-number="2"></ul> 
class="cs-box" data-number="3"></ul> 


-box[data-number="1"] 1i {} 
-box[data-number="2"] 1i {} 
-box[data-number="3"] 1i {} 





这 个 实现 方法 可 以 很 好 地 满足 我 们 的 开发 需求 ， 唯 一 的 不 足 就 是 当 


子 头 像 数 量变 化 时 ， 需 要 同时 修改 data-number 的 属性 值 ， 开 发 微微 麻 
烦 了 点。 


实际 上 ， 还 有 更 巧妙 的 实现 方法 ， 那 吏 是 借助 子 索 引 伪 类 ， 目 动 判 
晰 我 们 列表 项 的 个 数 ， 从 而 实现 我 们 想 要 的 布局 。 





在 这 个 方法 中 ， 你 不 需要 在 父 元 素 上 设置 当前 列表 的 个 数 ， 因 此 ， 
HIML 看 起 来 平平 无 奇 : 





<U1L class="box"> 
<1i></1i> 
<1i></1i> 


<1i></1i> 


</ul> 





关键 残 在 于 CSS， 我 们 可 以 借助 伪 类 判断 当前 列表 的 个 数 ， 示 意 如 


1 个 */ 
i :only-child {} 
2 个 */ 


i :first-child:nth-last-child(2) {} 
3 个 7*7 
i :first-child:nth-last-child(3) {} 





其 中 ，:first-child:nth-last-child(2) 表 示 当 前 <1i> 元 素 既 
匹配 第 一 个 子 元 素 ， 又 匹配 从 后 往 前 的 第 二 个 子 元 素 ， 因 此 ， 我 们 就 能 
判断 当前 总 共有 两 个 c1i> 子 元 素 ， 我 们 融 能 精准 实现 我 们 想 要 的 布局 
了 ， 只 需要 配合 相 邻 兄弟 选择 符 加 号 〈+) 以 及 兄弟 选择 符 〈~) 即 可 。 
例如 : 




















3 个 1i 项 目 ， 匹 配 第 1 个 列表 项 */ 
i :first-child:nth-last-child(3) {} 

3 个 1i 项 目 ， 匹 配 第 1 个 列表 项 相 邻 的 第 2 项 列表 */ 
i :first-child:nth-last-child(3) + 1i {} 




















3 个 1i 项 目 ， 匹 配 第 1 个 列表 项 后 面 的 所 有 列表 项 ， 也 就 是 第 2 项 和 第 3 项 列表 */ 
i :first-child:nth-last-child(3) ~ 1i {} 

3 个 1i 项 目 ， 匹 配 最 后 1 项 ， 也 就 是 第 3 项 */ 
i:first-child:nth-1last-child(3) ~ :last-child {} 












































基于 上 面 的 数量 匹配 原理 就 能 目 动 实现 不 同 列表 数量 下 的 不 同 布局 
效果 了 了 。 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/10/3-3.php 或 扫描 
下 面 的 二 维 码 杀 自 体验 与 学 习 。 








实现 效果 如 图 10-14 所 示 。 





图 10-14 不 同 头 像 数 量 下 不 同 布局 的 实现 效果 





其 中 ，HTML 结 构 如 下 : 


<div class="cs-box"> 
<!-- 1-9 个 .cs-1i 元 素 --> 
<div class="cs-1i"></div> 
</div> 





由 于 CSS 部 分 代码 较 多 ， 因 此 这 里 只 给 出 两 个 列表 排列 时 候 的 布局 
样式 : 





.CS-box { 
width: 126px; height: 126px; 
background-color: #e6e6e6 


} 

/* 2 个 列表 */ 

.CS-1i:first-child:nth-last-child(2), 

.CS-l1i:first-child:nth-last-child(2) + .cs-li { 
width: 56%; height: 562%; 


} 
/* 第 2 个 列表 右 对 齐 */ 


.CS-1i:first-child:nth-1last-child(2) + .cs-li { 
margin-left: auto; 


} 





10.4 匹配 类 型 的 子 索 引 伪 类 


匹配 类 型 的 子 索 引 伪 类 类 似 于 子 索引 伪 类 ， 区 别 在 于 匹配 类 型 的 子 
索引 伪 类 是 在 同 级 列表 中 相同 标签 元 素 之 间 进 行 索引 与 解析 的 。 





写 HTIML 的 时 候 要 注意 使 用 语义 化 标签 ， 甚 至 可 以 使 用 目 定义 标 
签 ， 因 为 本 市 中 的 这 些 伪 类 要 想 在 项 目 中 大 放 异 彩 ， 离 不 开标 签 的 区 
分 ， 如 果 全 部 部 是 <div> 元 素 ， 束 无 法 使 用 这 些 伪 类 ， 很 是 可 惜 。 


10.4.1 :first-of-type 伪 类 和 :last-of-type 
伪 类 


:first-of-type 表 示 当 前 标签 类 型 元 素 的 第 一 个 。 例 如 : 


dl > :first-of-type { 
color: deepskyblue; 
font-style: italic; 


} 

<dl> 
<dt> 标 题 </dt> 
<dd> 内 容 </dd> 

</dl> 





结果 <dt> 和 <dd> 均 匹配 了 :first-of-type 伪 类 ， 文 字 表 现 为 天 蓝 
色 加 倾斜 ， 如 图 10-15 所 示 。 


内 从 


图 10-15 :first-of-type 伪 类 匹配 首 个 标签 元 素 








如 果 有 如 下 HTML， 其 中 有 多 个 <dt> 和 <dd> 元 素 ， 则 后 面 的 <dty> 
和 <dd> 元 素 不 会 匹配 :first-of-type 伪 类 ， 文 字 表现 为 默认 的 黑色 ， 


也 不 会 倾斜 ， 如 图 10-16 所 示 。 





<d1> 
<dt> 标 题 1</dty> 
<dd> 内 容 1</dd> 
<dt> 标 题 2< /dt> 
<dd> 内 容 2</dd> 
</dl> 
asi 
pe 
A 
标题 2 
[| 2 
内 容 2 


图 10-16 :first-of-type 伪 类 只 匹配 首 个 标签 元 素 


:1ast-of-type 伪 类 的 语法 和 匹配 规则 与 :first-of-type 的 类 
似 ， 区 别 在 于 
:last-of-type 伪 类 是 匹配 最 后 一 个 同类 型 的 标签 元 素 。 例 如 : 





dl > :last-of-type { 
color: deepskyblue; 
font-style: italic; 

} 

<d]> 
<dt> 标 题 1</dt> 


<dd> 内 容 1</dd> 

<dt> 标 题 2</dt> 

<dd> 内 容 2</dd> 
</dl> 





则 最 后 面 的 <dt> 和 <dd> 元 素 中 的 文字 会 倾斜 ， 如 图 10-17 所 示 。 





图 10-17 :last-of-type 伪 类 匹配 最 后 一 个 标签 元 素 
10.4.2”:only-of-type 伪 类 


:on1y-of-type 表 示 匹 配 唯 一 的 标签 类 型 的 元 素 。 例 如 : 


<d1> 
<dt> 标 题 </dty> 


<dd> 内 容 </ddy> 
</dl> 








使 用 :only-of-type 伪 类 也 可 以 匹配 <dt> 和 <dd> 元 素 ， 因 为 这 两 
种 类 型 的 标签 都 只 有 1 个 : 


dl > :only-of-type { 
color: deepskyblue; 


font-style: italic; 
} 





结果 如 图 10-18 所 示 。 


图 10-18 :only-of-type 伪 类 匹配 唯一 标签 元 素 


匹配 :only-child 的 元 素 一 定 匹配 :on1y-of-type 伪 类 ， 但 匹 
配 :only-of-type 伪 类 的 元 素 不 一 定 匹配 :on1y-child 伪 类 。 





:on1y-of-type 伪 类 缺少 典型 的 应 用 场景 ， 大 家 需要 根据 实际 情况 
见 机 使 用 。 


10.4.3”:nth-of-type() 伪 类 和 :nth-last-of- 
type() 伪 类 


:nth-of-type( ) 伪 类 [匹配 指定 索引 的 当前 标签 类 型 元 素 ，:nth- 
of-type() 仿 类 是 从 前 面 开始 匹配 ， 而 :nth-1last-of-type() 伪 类 是 
从 后 面 开始 匹配 。 


1. :nth-child() 伪 类 和 :nth-of-type() 伪 类 的 异同 


:nth-of-type() 伪 类 和 :nth-child() 伪 类 的 相同 之 处 是 它们 的 
语法 是 一 模 一 样 的 。 


(1) 关键 字 值 的 形式 如 下 。 


。 odd: 匹配 第 奇数 个 当前 标签 类 型 元 素 。 
。 even: 匹配 第 偶数 个 当前 标签 类 型 元 素 。 





(2) 函数 符号 的 形式 如 下 。 


。 An+B: 其 中 A 和 B 都 是 固定 的 数值 ， 且 必须 是 整数 ，n 可 以 理解 为 从 
1 开始 的 自然 序列 (0, 1, 2, 3, ...)，n 前 面 可 以 有 人 负 号 。 和 第 一 个 标签 
元 素 的 匹配 序号 是 1， 小 于 1 的 计算 序号 都 会 被 忽略 。 


例如 : 


/* 第 奇数 个 <p> 元 素 的 背景 为 灰 
p:nth-of-type(2n + 1) { 
background-color: #ddd; 





} 
/* 将 第 4 的 倍数 个 <p> 元 素 加 粗 同时 深 天 蓝 色 显示 */ 
p:nth-of-type(4n) { 

color: deepskyblue; 

font-weight: bold; 


} 


<article> 
<h3> 标 题 1</h3> 
<p> 段 落 内 容 1</p> 
<p> 段 落 内 容 2</p> 
<h3> 标 题 2</h3> 
<p> 段 落 内 容 3</p> 
<p> 段 落 内 容 4</p> 

</article> 





结果 “段落 内 容 1* 和 “段落 内 容 3” 有 背景 色 , “段落 内 容 4” 被 加 粗 同 时 
深 天 蓝 色 显示 ， 如 图 10-19 所 示 。 


段落 内 容 3 


股 落 内 容 4 


图 10-19 :nth-of-type() 的 匹配 效果 截图 
:nth-of-type() 伪 类 和 :nth-child() 伪 类 的 不 同 之 处 是 ，:nth- 


of -type() 伪 类 的 匹配 范围 是 万 有 相同 标签 的 相 邻 元 系 ， 而 :nth- 
child() 伪 类 会 匹配 所 有 相 邻 元 系 ， 而 无 视 标 俭 类 型 。 





如 果 上 面 的 案例 改 成 使 用 :nth-chil1d() 伪 类 ， 有 具体 如 下 : 





/* 第 奇数 个 元 素 ， 同 时 是 <p> 标 签 */ 

p:nth-child(2n + 1) { 
background-color: #ddd ; 

} 

/* 第 4 的 倍数 个 cp> 元 素 ， 同 时 是 <p> 标 签 */ 





p:nth-child(4n) { 
color: deepskyblue; 
font-weight: bold; 
} 





那么 匹配 元 素 会 大 不 一 样 ，p:nth-child(4n) 选 择 器 则 没有 匹 
配 ， 如 图 10-20 所 示 。 
标题 1 
段 藻 内容 1 
段落 内 容 2 
标题 2 
落 内 容 3 
段落 内 容 4 


图 10-20 :nth-child() 对 比 匹配 效果 截图 


2. :nth-of-type() 伪 类 的 适用 场景 





:nth-of-type() 伪 类 适用 于 特定 标签 组 合 且 这 些 组 合 会 不 断 重 复 
的 场合 。 在 整个 HTML 中 ， 这 样 的 组 合 元 素 并 不 多 见 ， 说 得 出 来 的 也 就 
是 “dt+dd” 组 合 : 





<dl> 
<dt> 标 题 1</dty> 
<dd> 内 容 1</ddy> 


<dt> 标 题 2</dty> 
<dd> 内 容 2</dd> 
</dl> 





以 及 “details > summary” 组 合 : 


<details open> 
<summary> 订 单 中 心 </summary> 
<a href> 我 的 订单 </a> 


























<a href> 我 的 活动 </a> 

xa href> 评 价 晒 单 </a> 

xa _ href> 购 物 助 手 </ay> 
</details> 
































这 上 段 代 码 中 的 <a> 元 素 束 可 以 使 用 :nth-of-type( ) 伪 类 进行 下 
配 。 


然后 ， 在 这 里 介绍 一 个 我 在 实际 项 目 开发 中 经 常用 到 :nth-of- 
type() 伪 类 的 场景 。 例如， 实现 图 10-21 所 示 的 列表 布局 ， 其 中 点 击 列 
表 会 有 一 个 选中 状态 。 


ei 


选中 状 专 





图 10-21 带 有 选中 状态 的 列表 布局 目标 效果 


显然 ， 这 样 的 效果 非常 适合 使 用 :checked 仿 类 技术 实现 ， 且 无 须 
任何 JavaScript 代 码 就 能 实现 交互 ，HIML 如 下 : 


<div class="cs-box"> 
<input id="list1" type="radio”name="1ist"> 
<label for="list1" class="cs-1i"></label> 
<input id="list2" type="radio" name="]list"> 
<label for="list2" class="cs-1i"></label> 
<input id="list3" type="radio" name="list" checked> 
<label for="list3" class="cs-1i"></label> 
<input id="list4" type="radio" name="list"> 
<label for="list4" class="cs-1i"></label> 
<input id="list5" type="radio" name="list"> 
<label for="list5" class="cs-1i"></label> 
<input id="list6" type="radio" name="list"> 
<label for="list6" class="cs-1i"></label> 

</div> 











此 时 就 不 能 使 用 :nth-child(5n) 对 边缘 列表 进行 匹配 了 ， 因 为 还 
有 平 级 的 input [type="radio"] 元 素 。 此 时 需要 使 用 :nth-of- 
type(5n) 进 行 匹 配 ，CSS 代 人 码 示 意 如 下 : 





.CS-li { 
float: left; 
width: calc((166% - 46px) / 5); 
margin-right: 16px; 
cursor: pointer; 


:Checked + .cs-1i 
box-shadow: 6 6 6 3px deepskyblue; 
} 
.CSs-li:nth-of-type(5n) { 
margin-right: 6; 


} 








.CS-1i:nth-of-type(5n) 的 含义 是 所 有 类 名 是 .cs-1i 的 元 素 按 
照 标 签 类 型 进行 分 组 ， 然 后 匹配 各 个 分 组 中 索引 值 是 5 的 倍数 的 元 素 。 
在 本 例 中 .cs-1i 元 素 都 是 <labe1> 元 素 ， 和 隐藏 的 单 选 枉 <input> 元 素 
正好 区 分 开 了 ， 故 能 准确 匹配 。 如 果 没 有 :nth-of-type() 伪 类 ， 怕 是 
要 给 每 个 列表 组 都 般 套 一 层 标签 了 ， 那 实现 就 吃 唆 了 。 


SO 本 多 间 和 人 洁 凡 大 


本 章 将 介绍 4 个 逻辑 组 合 伪 类 ， 分 别 是 :not()、:is()、:where() 
和 :has()。 这 4 个 伪 类 自身 的 优先 级 都 是 0， 当 伪 类 选择 器 自身 和 括号 
里 的 参数 作为 一 个 整体 时 ， 整 个 选择 器 的 优先 级 各 有 差异 ， 有 的 由 参数 
选择 器 决定 ， 如 :not()， 有 的 参数 选择 器 的 优先 级 也 是 0， 
如 :where()。 


:not() 伪 类 从 IE9 浏 览 器 就 开始 受到 支持 ， 非 常 实 用， 务必 掌握 。 
其 他 3 个 伪 类 目前 还 都 处 于 不 稳定 的 实验 阶段 ， 浏 览 器 支持 有 限 ， 本 章 
只 会 做 简单 介绍 ， 不 会 深入 。 


11.1 否定 念 类 :not() 


:not() 是 否定 伪 类 ， 如 果 当 前 元 素 与 括号 里 面 的 选择 器 不 匹配 ， 
则 该 伪 类 会 进行 匹配 。 例 如 : 


:not(p) {} 


会 匹配 所 有 标签 不 是 p 的 元 素 ， 包 括 <htm1> 元 素 和 <body> 元 素 。 





其 他 细 市 





(1) :not() 伪 类 的 优先 级 是 9， 即 它 本 身 没 有 任何 优先 级 ， 最 终 


选择 器 的 优先 级 是 由 括号 里 面 的 表达 式 决 定 的 。 例 如 : 


:not(p) {} 


的 优先 级 就 是 p 选 择 占 的 优先 级 。 


(2) :not() 伪 类 可 以 不 断 级 联 。 例 如 : 


input:not(:disabled) :not(:read-only) {} 





表示 匹配 所 有 不 处 于 茶 用 状态 ， 也 不 处 于 只 读 状 态 的 <input> 元 
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(3) :not() 伪 类 目前 尚未 文 持 多 个 表达 式 ， 也 不 文 持 出 现 选择 
人 符 。 例 如 ， 下 面 这 种 写法 目前 是 不 受 文 持 的 : 








/* 尚未 支持 */ 
.CS-li:not(li, dd) {} 


可 以 使 用 下 面 的 写法 代 符 : 


.CSs-li:not(l1i):not(dd) {} 





下 面 这 几 种 写法 也 都 不 文 持 : 


/* 尚未 支持 */ 
input:not(:disabled:read-only) {} 
/* 尚未 支持 */ 


input:not(p:read-only) {} 
/* 尚未 文 持 */ 
input:not([id][title]) {} 





总 之 ， 目前 只 支持 简单 选择 器 。 


告别 重 置 ， 全 部 交 给 :not() 伪 类 





:not() 伪 类 最 大 的 作用 就 是 可 以 优化 过 去 我 们 重 置 CSS 样 式 的 策 
略 。 由 于 重 置 样式 在 Web 开 发 中 非常 常见 ， 因 此 :not() 伪 类 的 适用 场景 
非常 广泛 。 

举 个 例子 ， 我 们 在 实现 选项 卡 切换 效果 的 时 候 会 默认 隐藏 部 分 选项 
卡 面 板 ， 点 击 选项 卡 按 钮 后 通过 添加 激活 状态 类 名 让 隐藏 的 面板 再 显 
示 ，CSS 如 下 : 








.Cs-panel { 
display: none; 


} 


.Cs-panel.active { 
display: block; 
} 





实际 上 ， 这 种 效果 有 更 好 的 实现 方式 ， 那 就 是 使 用 :not() 伪 类 ， 
推荐 使 用 下 面 的 CSS 代 码 : 


.CS-panel:not(.active) { 
display: none; 





} 


使 用 :not() 伪 类 有 如 下 优点 。 
(1) 使 代码 更 简洁 。 


(2) 更 好 理解 。 
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(3) 保护 了 原 类 名 的 优先 级 ， 扩 展 性 更 强 ， 更 利于 维护 ， 认 


重要 的 一 点 。 


还 是 上 面 的 例子 ， 由 于 不 同 的 选项 卡 面板 里 面 的 内 容 不 同 ， 因 此 所 
采用 的 布局 也 不 一 样 。 假 设 HTML 如 下 : 





<div class="cs-panel"> 面 板 1</div> 











<div class="cs-panel cs-flex"> 面 板 2</div> 
<div class="cs-panel cs-grid"> 面 板 3</div> 








“面板 2 需要 使 用 Flex 布 局 , “面板 3 需要 使 用 Grid 布局 ， 结 果 发 现 
传统 实现 的 CSS 代 码 无 能 为 力 ， 因 为 被 更 高 优先 级 的 CSS 代 码 .cs- 
panel.active 强 制 限定 为 了 display:block: 


.CS-panel { 
display: none; 

} 

.Cs-panel.active { 
display: block; 


~ 
下 面 两 个 布局 样式 都 无 效 
.Cs-panel.active 的 优先 
A 
.CS-flex { 
display: flex; 
} 
.CS-grid { 
display: grid; 














但 是 ， 如 果 使 用 的 是 :not() 伪 类 ， 这 样 的 效果 实现 起 来 就 很 轻 





.CS-panel:not(.active) { 
display: none; 


} 
/* 下 面 两 个 布局 样式 均 有 效 */ 




















.CS-flex { 
display: flex; 

} 

.CS-grid { 
display: grid; 

} 








又 如 上 一 章 列表 边缘 对 齐 的 例子 ， 不 应 该 使 用 下 面 的 写法 : 


.CS-1i { 
float: left; 
width: calc((166% - 46px) / 5); 
margin-right: 16px; 


} 

/* 不 推荐 这 样 重 置 */ 

.CSs-li:nth-of-type(5n) { 
margin-right: 6; 


} 











而 应 该 使 用 :not( ) 伪 类 : 


.CS-1i { 
float: left; 
width: calc((166% - 46px) / 5); 


} 

/* 推荐 这 样 设置 */ 

.CSs-li:not(:nth-of-type(5n)) { 
margin-right: 16pX; 

} 











又 如 按钮 样式 的 控制 ， 如 禁用 按钮 不 能 有 :hover 样 式 ， 传 统 实现 
是 下 面 这 样 的 : 
.CS-button， 


.CS-button:disabled:hover { 
background-color: #fff; 


} 
.CS-button:hover { 
background-color: #eee; 


} 





如 宁 像 下 面 这 样 : 


.CS-button { 
background-color: #fff; 
} 


.CSs-button:not(:disabled):hover { 
background-color: #eee; 


} 





代码 更 清晰 、 更 简洁 。 





总 之 ， 大 家 一 定 要 培养 这 样 的 意识 : 一 旦 遇 到 需要 重 置 CSS 样 式 的 
场景 ， 第 一 反应 就 是 使 用 :not( ) 伪 类 。 


但 是 ， 有 一 类 重 置 场景 ， 使 用 :not() 伪 类 可 能 会 有 预期 之 外 的 事 
情 发 生 。 


例如 ， 网 站 有 部 分 模块 的 HTML 需 要 保留 浏览 器 原生 的 样式 ， 其 他 
地 方 需 要 全 部 重 置 ， 假 设 模块 容器 标签 名 目 定 义 ， 名 称 是 x-article， 我 
们 会 想到 使 用 如 下 CSS: 





:not(x-article) ol, 
:not(x-article) ul { 
padding: 6; 


margin: 0@; 
list-style-type: none; 
} 








乍 一 看 这 是 一 个 很 棒 的 实现 ， 因 为 从 语法 上 直译 就 是 非 x-article 
标签 下 的 co1>、<ul> 元 素 样式 全 部 重 置 。 


但 实际 上 这 是 有 问题 的 。 例 如 ， 有 如 下 HTML 代 码 : 


<x-article> 
<div> 
<01> 
<1i> 内 容 1</1i> 


<1i> 内 容 2</1i> 
<1i> 内 容 3</1i> 
</o1> 
</div> 
</X-article> 





这 里 的 <o1> 元 素 的 margin 和 padding 等 CSS 属 性 样式 理论 上 应 该 不 
被 重 置 ， 但 实际 这 些 样式 都 被 重 置 了 ， 因 为 <o1> 元 素 外 面 的 <div> 元 素 
也 匹配 :not(x-article) o1 选 择 器 。 


在 这 种 场景 下 ， 就 不 要 使 用 使 用 :not() 伪 类 ， 除 非 <ol>、<u1> 元 
素 的 DOM 层 级 或 者 位 置 固定 ， 例 如 只 能 作为 <x-article> 的 子 元 素 存 
在 ， 此 时 ， 我 们 可 以 使 用 下 面 的 CSS 进 行 处 理 : 

:not(x-article) > 01， 


:not(x-article) > ul { 
padding: 6; 


margin: 0@; 
list-style-type: none; 


} 


11.2 了 解 任意 匹配 伪 类 :is() 





:is() 伪 类 可 以 把 括号 中 的 选择 费 依 次 分 配 出 去 ， 对 于 那 种 复杂 的 
有 很 多 逗号 分 隔 的 选择 器 非常 有 用 。 








在 具体 介绍 :is() 伪 类 之 前 ， 我 们 先 来 了 解 一 下 :is() 伪 类 
与 :matches() 伪 类 及 :any() 伪 类 之 间 的 关系 。 


11.2.1 :is() 伪 类 与 :matches() 伪 类 及 :any() 
伪 类 之 间 的 关系 


2018 年 10 月 底 ，:matches() 伪 类 改名 为 :is() 伪 类 ， 因 为 :is() 的 
名 称 更 简短 ， 且 其 语义 正好 和 :not() 相 反 。 


也 就 是 说 ，:matches() 伪 类 是 :is() 伪 类 的 前 身 。 然 后 很 有 趣 的 
是 :matches() 还 有 一 个 被 舍弃 的 前 和 映 ， 那 就 是 :any() 伪 类 ， 被 舍弃 的 
原因 是 选择 器 的 优先 级 不 准确 ，:any() 伪 类 会 忽略 括号 里 面 选 择 器 的 
优先 级 ， 而 永远 是 普通 伪 类 的 优先 级 。 





:any() 伪 类 名 义 上 虽然 被 舍 章 了 ， 但 是 除了 IE/Edge 以 外 的 浏览 咒 
都 支持， 而 且 很 早 就 文 持 ， 现 在 也 都 支持 ， 不 过 都 需要 添加 私有 前 组 ， 
如 -webkit-any() 以 及 -moz-any()。 


梳理 一 下 就 是 ， 移 有 :any() 伪 类 ， 不 过 其 需要 配合 私有 前 绥 使 
用 ， 后 来 因为 选择 器 的 优先 级 不 准确 ，:any() 伪 类 被 舍弃 ， 成 
为 :matches() 伪 类 ， 然 后 又 因为 :matches() 伪 类 的 名 称 不 太 好 ， 最 近 
又 修改 成 了 :is() 伪 类 。 但 这 3 个 伪 类 的 语法 都 是 一 模 一 样 的 ， 在 我 书 
写 这 段 内 容 的 此 刻 ，Chrome 浏 览 器 已经 可 以 运行 :is() 伪 类 ， 同 时 舍弃 
了 :matches() 伪 类 (已 无 法 识别 ) 。 根 据 我 的 判断 ，:is() 伪 类 会 一 
直 稳 定 下 去 。 





上 面 提 到 了 :any() 伪 类 的 优先 级 ， 下 面 来 说 说 :is() 伪 类 的 优先 
级 ，:is() 伪 类 的 优先 级 解析 才 是 正确 的 ， 具 体 如 下 : :is() 伪 类 本 号 


的 优先 级 为 0， 整 个 选择 器 的 优先 级 是 由 :is( ) 伪 类 里 面 参数 优先 级 最 
高 的 那个 选择 器 决定 的 。 例 如 : 


优先 级 等 同 于 .articla p， 又 如 : 


:is(#article, .section) p {} 


优先 级 等 同 于 #articla p。 这 是 由 参数 中 优先 级 最 高 的 选择 器 决 
定 的 。 





11.2.2 :is() 伪 类 的 语法 与 作用 


:is() 伪 类 由 于 是 新 伪 类 ， 没 有 历史 包容 ， 因 此 浏览 器 厂商 直接 按 
照 最 新 的 标准 实现 ， 参 数 可 以 是 复杂 选择 需 或 复杂 选择 器 列表 ， 这 一 
和 :not() 伪 类 不 同 ，:not() 伪 类 目前 只 文 持 简单 选择 如 参数 。 


例如 ， 下 面 的 写法 都 是 合法 的 : 


/* 简单 选择 器 */ 
:is(article) p {} 
/A 简单 选择 器 列表 */ 


:is(article, section) p {} 


/* 复杂 选择 器 */ 
:is(.article[class]，section) p {} 
/* 带 逻 辑 伪 类 的 复杂 选择 器 


.Some-class:is(article:not([id]), section) p {} 


























:isO 伪 类 的 作用 就 是 简化 选择 器 。 例 如 ， 平 时 开发 经 常会 遇 到 类 似 
下 面 的 CSS 代 码 : 


.CS-avatar-a > img， 
.CS-avatar-b > img， 
.Cs-avatar-c > img， 
.CS-avatar-d > img { 


display: block 
width: 166%; height: 
border-radius: 562%; 


} 





此 时 就 可 以 使 用 :is() 伪 类 进行 简化 : 


:is(.cs-avatar-a, .cs-avatar-b, .cs-avatar-c, .cs-avatar-d) > img { 
display: block; 
width: 166%; height: 166%; 
border-radius: 562%; 


} 





这 种 人 简化 只 是 一 维 的 ，:is() 伪 类 的 优势 并 不 明显 ， 但 如 果 选 择 器 
古 交 叉 组 合 的 ， 那 :is() 伪 类 就 大 放 异 彩 了 。 例 如 ， 有 序列 表 和 无 序列 
表 可 以 相互 葵 套 ， 假 设 有 两 层 供 套头 系 ， 则 最 里 面 的 <11> 元 素 束 存在 下 
面 4 种 可 能 场景 : 














ol 1i, 

ul 1i, 

ul 1i, 

ol li { 
margin-left: 2em; 











如 果 使 用 :is( ) 伪 类 进行 强化 ， 则 只 有 下 面 这 几 行 代码 : 


:is(ol，U1) :is(ol], ul) 1i { 


margin-left: 2em; 


} 





:is() 伪 类 是 一 个 有 用 但 不 被 迫切 需要 的 伪 类 ， 大 家 可 以 等 浏览 器 


全 面 文 持 后 再 使 用 。 


11.3 了 解 任意 匹配 伪 类 :where() 


:where( ) 伪 类 是 和 :is() 伪 类 一 同 出 现 的 ， 它 们 的 含义 、 语 法 、 作 
用 一 模 一 样 。 唯 一 的 区 别 就 是 优先 级 不 一 样 ，:where( ) 伪 类 的 优先 级 
永远 是 0。 例 如 : 


:where(.article, section) p {} 


的 优先 级 等 同 于 p 选 择 器 ， 参 数 里 的 选择 器 的 优先 级 被 完全 忽略 。 
又 如 : 


:where(#article, #section) .content {} 


的 优先 级 等 同 于 .content 选 择 器 。 
11.4 J 了解 关联 伪 类 :has() 


:has() 伪 类 是 一 个 规范 制定 得 很 早 但 浏览 器 却 述 述 没 有 文 持 的 伪 
类 。 如 果 浏 览 器 能 够 支持 ， 其 功能 会 非常 强大 ， 因 为 它 可 以 实现 类 
似 “ 父 选择 器 "和 “前 面 兄 第 选择 占 ” 的 功能 ， 对 CSS 的 开发 会 有 丰 履 性 的 
影响 。 


例如 : 


a:has(< svg) {} 


表示 [匹配 包含 有 <svg> 元 素 的 <a> 元 素 ， 实 现 的 就 是 “ 父 选择 器 ”的 
效果 ， 即 根据 子 元 素 选 择 父 元 系 。 





又 如 : 


hi:has(+ p) {} 


表示 匹配 后 面 跟随 <p> 元 素 的 <h1> 元 素 ， 实 现 的 就 是 “前 面 兄弟 选 
择 需 ”的 效果 ， 即 根据 后 面 的 兄弟 元 素 选 择 前 面 的 元 隶 。 








由 于 没有 受到 浏览 需 文 持 ， 且 我 个 人 判断 以 后 很 长 一 段 时 间 也 不 会 
受到 文 持 ， 因 此 这 里 不 对 其 做 进一步 展开 。 


第 12 章 ”其 他 伪 类 选择 需 


因为 有 些 伪 类 相对 比较 零散 且 都 带 有 试验 性 质 ， 所 以 我 将 它们 全 部 
汇总 在 本 章 中 一 起 介绍 ， 同 时 会 对 每 一 个 伪 类 做 点 评 。 


12.1 与 作用 域 相关 的 盆 类 


本 节 将 介绍 几 个 与 作用 域 相关 的 伪 类 ， 其 中 :host 伪 类 和 :host() 
伪 类 是 使 用 频率 很 高 的 两 个 伪 类 ， 大 家 可 以 多 加 关注 。 





12.1.1 参考 元 系 伪 类 :scope 


曾经 有 一 段 时 间 ， 部 分 浏览 器 曾经 支持 过 “在 一 个 网 页 文档 中 支持 
多 个 CSS 作 用 域 "”， 语 法 是 在 <style> 元 素 上 设置 scoped 属 性 ， 如 下 : 


<style scoped> 
.your-css {} 
</style> 


在 一 看 争 论 之 后 ， 这 个 特性 被 舍弃 了 ， 原 本 文 持 它 的 浏览 器 也 不 文 
持 了 ，scoped 属 性 也 被 彻 谨 移 除了 ， 如 县 伦 一 现 。 


然而 ，:scope 伪 类 却 被 保留 了 下 来 ， 而 且 除 了 IE/Edge， 其 他 浏览 
器 都 支持 。 


但 是 ， 不 要 兴奋 ， 虽 然 浏 览 器 都 支持 :scope， 但 已 经 完全 变味 
了 。 在 CSS 世 界 中 ，:scope 伪 类 更 像 是 一 个 摆设 。 因 为 如 今 的 网 页 只 有 
一 个 CSS 作 用 域 ， 所 以 :scope 伪 类 等 同 于 :root 伪 类 。 


例如 ， 我 们 设置 


:scope { 
background-color: skyblue; 


} 
和 设置 


:root { 
background-color: skyblue; 


} 
最 终 的 效果 是 一 模 一 样 的， 都 是 网 页 的 背景 变 成 天 蓝 色 。 


当然， 存在 即 月 理 。 5Sc6pe 人 不 是 三 是 外 芭 是 直人 共 区 全 
的 用 来 区 分 IE/Edge 和 其 他 浏览 器 的 利器 ， 区 分 方法 为 


/* IE/Edge */ 
.Cs-class {} 

/* Chrome/Firefox/Safari 等 其 他 浏览 器 
:scope .cs-class {} 


/* IE/Edge */ 

.Cs-class {} 
/* Chrome/Firefox/Safari 等 其 他 浏览 器 */ 
:scope, .cs-class {} 





推荐 使 用 后 面 一 种 方式 ， 因 为 选择 器 的 优先 级 更 合理 。 





另外 ， 虽 然 :scope 伪 类 在 CSS 世 界 中 的 作用 有 限 ， 但 是 它 在 一 些 
DOM API 中 却 表现 出 了 真正 的 语义 ， 这 些 API 包 括 
querySelector()、querySelectorAl11()、matches() 和 
Element.closest()。 此 时 :scope 伪 类 匹配 的 是 正在 调用 这 些 API 的 
DOM 元 素 。 


直接 这 么 讲 估计 不 太 好 懂 ， 我 们 看 一 个 在 4.1.2 节 中 己 经 出 现 过 的 例 
子 。 己 知 HTML 如 下 : 
<div id="myId"> 


<div class="lonely"> 单 身 如 我 </div> 
<div class="outer"> 





<div class="inner"> 内 外 开花 </div> 
</div> 
</div> 





此 时 ， 执 行 如 下 JavaScript 代 码 : 
document .querySelector('#myId').querySelectorAll('div div'); 
在 控制 台 输 出 的 是 3 个 <div> 元 素 : 


NodeList(3) [div.lonely, div.outer, div.inner] 
因为 选择 器 'div div' 是 相对 于 整个 文档 而 言 的 ， 语 义 就 是 返回 页 
面 中 既 匹 配 'div div' 选 择 器 义 是 #myId 子 元 素 的 元 素 。 





如 果 修 改 一 下 运行 的 JavaScript 人 代码， 增加 :scope 伪 类 ， 就 像 下 面 
样 : 


document .querySelector('#myId').querySelectorAll(':scope div div'); 


[ey 


则 输出 结果 就 只 有 1 个 <div> 元 素 了 : 


NodeList(1) [div.inner] 


因为 此 时 ':scope div div' 中 的 :scope 匹 配 的 就 是 #myId 元 素 ， 
语义 就 是 返回 页 面 中 既 匹 配 '#myId div div' 选 择 器 又 是 #myId 子 元 素 
的 元 素 。 


由 于 :scope 伪 类 从 原本 的 作用 域 特性 变 成 了 在 DOM API 中 指 代 特 
别 的 元 素 ， 因 此 ， 现 在 称 :scope 伪 类 为 参考 元 系 伪 类 ， 而 不 是 作用 域 


12.1.2 Shadow 树 根 元 素 伪 类 :host 





要 想 让 CSS 不 受 全 局 CSS 的 有 影响， 目前 只 有 一 个 方法 ， 就 是 创建 
Shadow DOM， 把 样式 写 在 其 中 ， 此 时 该 Shadow DOM 的 根 元 素 
(ShadowRoot) 就 是 使 用 :host 伪 类 进行 匹配 的 。 


例如 ， 我 们 自 定义 一 个 <square-img> 元 素 ， 让 图 片 永 远 以 正方 形 
显示 ， 同 时 如 果 有 alt 属 性 值 ， 则 直接 在 图 片上 显示 : 





<square-img src="./1.jpg" size="266" alt=" 提 示 信 息 "></square-img> 


如 果 我 们 创建 如 下 所 示 的 Shadow DOM 结 构 : 


square-img 


此 时 ，:host 伪 类 [匹配 的 就 是 <square-img> 这 个 元 素 。 例 如 ， 我 
们 为 Shadow DOM 结 构 创 建 如 下 所 示 的 CSS， 相 当 于 将 csquare-img> 元 
素 的 字号 设置 为 122px， 并 将 其 颜色 设置 为 ”白色 : 


:host { 
display: inline-block; 
font-size: 12px; 
color: #fff; 
text-align: center; 
line-height: 24px; 
position: relative; 


span:not(:empty) { 
position: absolute; 
background-color: rgba(0,08,0, .5); 
left: 6; right: 68; bottom: 6; 

} 

img { 
display: block; 
object-fit: cover; 


} 





于 是 ， 可 以 看 到 图 12-1 所 示 的 效果 。 





图 12-1 :host 伪 类 控制 Shadow DOM 根 元 素 样 式 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/12/1-1.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 








该 伪 类 的 兼容 性 足够 ， 除 了 IE/Edge 不 支持 ， 其 他 浏览 器 都 支持 。 
12.1.3” ”Shadow 树 根 元 系 巨 配 伪 类 :host() 


:host() 伪 类 对 于 浏览 器 原生 Web Components 开 发 非常 重要 ， 是 务 
必要 掌握 的 伪 类 。 


:host() 伪 类 也 是 用 来 匹配 Shadow DOM 根 元 素 的 ， 区 别 在 
于 :host() 可 以 根据 根 元 素 的 ID、 类 名 或 者 属性 进行 有 区 别 的 匹配 。 





例如 ， 要 使 上 面 自 定义 的 <square-img> 元 素 支 持 圆 角 状 态 ， 也 就 
是 这 个 元 素 可 以 在 A 页 面 是 直角 ， 在 B 页 面 是 圆 角 ， 我 们 就 可 以 使 用 一 
个 自 定义 属性 data-radius 外 加 :host() 伪 类 非常 方便 地 进行 针对 性 开 
发 。 例 如 : 





<square-img src="./1.jpg"”size="266"” alt=" 直 角 头 像 "></square-img> 





<square-img src="./1.jpg”size="286606"” alt=" 圆 角 头 像 ” data-radius></square-im 
g> 








如 果 没 有 :host() 伪 类 ， 我 们 只 能 借助 JavaScript 判 断 是 否 有 设 
置 data-radius 属 性 ， 然 后 根据 判断 结果 设置 不 同 的 CSS 样 式 ， 很 抹 
烦 。 但 有 了 :host() 伪 类 ， 我 们 可 以 直接 使 用 CSS 样 式 进行 区 分 ， 代 码 
很 简单 也 很 干净 ， 如 下 : 


:host { 
display: inline-block; 
font-size: 12px; 
color: #fff; 
text-align: center; 
line-height: 24px; 


position: relative; 


} 

:host([data-radius]) { 
border-radius: 58%; 
overflow: hidden; 


} 





此 时 的 泻 染 效果 如 图 12-2 所 示 。 








图 12-2 :host () 伪 类 可 方便 控制 组 件 显示 为 直角 还 是 圆 角 


读者 可 以 手动 输入 https://demo.cssworld.cn/selector/12/1-2.php 或 扫描 
下 面 的 二 维 码 杀 目 体验 与 学 习 。 





该 伪 类 的 兼容 性 和 :host 伪 类 的 是 一 样 的 ， 凡 是 支持 Shadow 
DOM (V1) 的 浏览 器 均 支 持 :host() 伪 类 ， 包 括 Chrome 浏 览 器 、 
Firefox 63 及 以 上 版 本 的 浏览 器 、Safari 浏 览 器 等 。 

另外 ，:host() 伪 类 只 能 在 Shadow DOM 内 部 使 用 ， 在 外 部 使 用 是 
没有 效果 的 。 

12.1.4 ”Shadow 树 根 元 系 上 下 文 四 配 伪 类 :host- 
context() 


:host-context() 伪 类 也 是 用 来 匹配 Shadow DOM 根 元 素 的 ， 
与 :host() 伪 类 的 区 别 在 于 ，:host-context() 伪 类 可 以 借助 Shadow 
DOM 根 元 素 的 上 下 文 元 素 〈 也 就 是 父 元 素 ) 来 匹配 。 


举 个 例子 ， 还 是 正方 形 图 像 的 圆 角 控制 ， 我 们 可 以 借助 <square- 
img> 所 在 的 父 元 素来 控制 ，HTML 代 码 如 下 : 





<p> 
<square-img src="./1.jpg"” alt=" 直 角 头 像 "></square-img> 


</p> 
<p class="cs-radius"> 








<square-img src="./1.jpg"” alt=" 圆 角 头 像 "></square-img> 
</p> 





下 面 这 个 <square-img> 的 圆 角 效果 是 通过 父 元 素 .cs-radius 控 制 
的 ， 相 关 CSS 如 下 : 


:host { 
display: inline-block; 
font-size: 12px; 
color: #fff; 
text-align: center; 
line-height: 24px; 
position: relative; 


} 

:host-context(.cs-radius) { 
border-radius: 562%; 
overflow: hidden; 





此 时 的 渔 染 效果 如 图 12-3 所 示 。 











图 12-3 :host-context() 伪 类 通过 父 元 素 控制 组 件 显示 为 圆 角 








读者 可 以 手动 输入 https://demo.cssworld.cn/selector/12/1-3.php 或 扫描 
下 面 的 三 维 码 杀 目 体验 与 学 习 。 





:host-context() 目 前 仅 受 Chrome 浏 览 器 和 Android 设 备 支 持 ， 
此 建议 在 实验 性 项 目 中 使 用 。 


同样 ，:host-context() 伪 类 只 能 在 Shadow DOM 内 部 使 用 ， 在 外 
部 使 用 是 没有 效果 的 。 


12.2 与 全 屏 相 关 的 伪 类 :fullscreen 


:fullscreen 伪 类 用 来 匹配 全 屏 元 素 。 


泉 面 浏览 器 以 及 部 分 移动 问 浏 览 占 是 支持 原生 全 屏 效 果 的 ， 通 过 
dom.requestFullScreen() 方 法 可 让 元 素 全 屏 显 示 ， 通 过 
document.cancelFullScreen() 方 法 可 取消 全 屏 。 





:fullscreen 伪 类 是 用 来 匹配 处 于 全 屏 状 态 的 dom 元 素 
的 ，: :backdrop 伪 元 素 是 用 来 匹配 浏览 器 默认 的 黑色 全 屏 背 景 元 素 
的 。 





举 个 简单 的 例子 ， 如 果 希 望 一 个 普通 的 <img> 元 素 全 屏 时 绝对 定位 
居中 显示 ， 就 可 以 使 用 :fullscreen 进 行 设置 : 


<div id="img" class="cs-img-x"> 

<img class="cs-img" src="/images/common/1/1.jpg"> 
</div> 
img.addEventListener("click", function() { 

if (document.fullscreen) { 


document .cancelFullScreen(); 
} else { 
this.requestFullScreen(); 
} 
}); 





当 反 击 <img> 元 系 进 入 全 屏 状 态 后， 图片 的 父 元 素 #img 的 尺寸 会 被 
拉 伸 到 全 屏 状态 ，<img> 元 素 会 挂 在 左上 角 ， 此 时 就 可 以 使 
用 :fullscreen 伪 类 进行 匹配 与 定位 ，CSS 如 下 : 
:fullscreen .cs-img { 


position: absolute; 
left: 56%; top: 58%; 


transform: translate(-56%, -506%); 
} 





效果 如 图 12-4 所 示 。 


@ cssewoerlid.cn 已 进入 全 奔 屋 式 《EEC 








图 12-4 ”Firefox 浏 览 器 下 全 屏 状 态 图 片 居 中 效果 截图 








读者 可 输入 https://demo.cssworld.cn/selector/12/2-1.php 查 看 实例 。 


全 屏 匹 配 伪 类 很 早 就 被 各 大 浏览 器 文 持 了 ， 只 不 过 一 开始 的 名 称 并 

不 是 :fullscreen， 而 是 :ful1-screen， 且 需要 添加 私有 前 缀 ， 即 : - 

webkit-full-screen 和 :-moz-full- screen。 但 是 现在 ，Edge 12 及 

以 上 版 本 、Firefox 64 及 以 上 版 本 和 Chrome 浏 览 器 都 已 经 文 持 无 须 私 有 
前 级 且 更 标准 的 :fullscreen 伪 类 ， 我 们 可 以 放心 使 用 。 


12.3 了 解 语言 相关 伪 类 


本 节 介 绍 的 几 个 伪 类 并 不 常用 ， 一 方面 ， 其 本 喘 的 设计 初 囊 是 更 好 
地 处 理 多 语言 ， 必 一 方面 ， 当 前 浏览 露 的 文 持 情况 有 限 ， 还 不 全 于 可 以 
大 规模 使 用 ， 了 解 一 下 即 可 。 





12.3.1 方向 伪 类 :dir() 


在 实际 开发 时 ， 我 们 有 了 时候 希望 布局 的 元 素 是 从 右 往 左 排列 的 。 例 
如 ， 实 现 微 信 或 者 QQ 这 样 的 左右 对 话 效果 ， 右 侧 的 对 话 布局 就 可 以 直 
接 添 加 HITML dir 属 性 控制 实现 ， 如 图 12-5 所 示 。 


条 值得 一 听 ~~ 


py «<div dir="rtl"></ div> 


<div></div> £ 
围观 戏 精 现场 6 


图 12-5 _ dir 属性 与 左右 对 称 布局 示意 








用 传统 的 实现 方法 ， 我 们 会 使 用 属性 选择 器 进行 匹配 。 例 如 : 


[dir="rtl"] .cs-avatar {} 


但 是 ，[dir="rt1"] 选 择 器 有 一 个 比较 明显 的 缺点 ， 即 它 无 法 直接 
匹配 没有 设置 dir 属 性 的 元 素 ， 也 无 法 准确 知道 没有 设置 dir 属 性 元 素 
的 准确 的 方向 ， 因 为 dir 带 来 的 文档 流 方 向 变化 是 具有 继承 性 的 。 例 
如 ， 在 <body> 元 素 上 设置 [dir="rt1"]， 只 靠 属 性 选择 器 是 无 法 知道 





茶 个 具体 的 图 片 的 方 回 是 "1tr" 还 是 "rt1" 的 。 











:dir() 伪 类 就 是 为 弥补 这 个 缺点 而 设计 的 ， 无 论 元 素 有 没有 设 
置 dir 属 性 ， 抑 或 有 没有 直接 使 用 CSS 的 direction 属 性 从 而 改变 了 文 
档 流 方 辐 ，:dir( ) 伪 类 都 可 以 准确 匹配 。 例 如 : 








.Cs-content:dir(rt1l) { 
/* 处 于 从 右 往 左 的 文档 流 中 ， 内 容 背 景色 高 之 为 深 天 蓝 色 */ 





background-color: deepskyblue; 





:dir() 伪 类 的 语法 如 下 : 


:dir( ltr | rtl ) 


其 中 ltr 是 left-to-right 的 缩写 ， 表 示 图 文 从 左 往 右 排列 ;rt1 是 right- 
to-left 的 缩写 ， 表 示 图 文 从 右 往 左 排列 。 





该 伪 类 还 是 有 一 定 的 使 用 价值 的 ， 但 遗憾 的 是 ， 截 止 到 我 写 下 这 上段 
文字 的 此 刻 ， 只 有 Firefox 浏 览 絮 文 持 它 ， 不 过 相信 其 他 浏览 器 很 快 整 会 
跟 进 的 。 


12.3.2 语言 伪 类 :1ang() 








:lang() 伪 类 用 来 匹配 指定 语言 环境 下 的 元 稍 。 


一 个 标准 的 XHTML 文档 结构 会 在 <htm1> 元 素 上 通过 HTML lang 属 
性 标记 语言 类 型 ， 对 于 简体 中 文 站 点 ， 建 议 使 用 zh-cmn-Hans: 


<!DOCTYPE html> 
<html lang="zh-cmn-Hans"> 
<head> 


<meta charset="UTF-8"> 
<body> 
</body> 
</html> 





对 于 英文 站 扣 或 者 海外 服务 器 ， 常 使 用 en: 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<body> 

</body> 

</html> 





此 时 ， 页 面 上 的 任意 标准 HIML 元 素 都 可 以 使 用 :lang() 伪 类 进行 
匹配 。 其 中 ， 括 号 内 的 参数 是 语言 代码 ， 如 en、fr、zh 等 。 例 如 : 


.Cs-content:lang(en) { 
/* 匹配 英文 语言 */ 

} 

.cs-content:lang(zh) { 
/* 匹配 中 文 语言 */ 





} 
:lang( ) 伪 类 的 典型 示例 是 CSS quotes 属 性 的 引号 匹配 。 例 如 : 


:lang(en) > q { quotes: '\281C' '\2061D' '\2818' '\28619'; } 
:lang(fr) > q { quotes: '« " '"»'; } 
:lang(de) > q { quotes: '»' '«' '\2839' '\2063A'; } 














<p lang="en"><q> 英 语 ， 外 面 有 引号 ，<q> 引 写 内 嵌 套 的 引号 </q>。</q></p> 
<p lang="fr"><q> 法 语 ， 外 面 有 引号 ，<q> 引 写 内 嵌 套 的 引号 </q>。</q></p> 
<p lang="de"><q> 德 语 ， 外 面 有 引号 ，<q> 引 号 内 构 套 的 引号 </q>。</9></p> 















































效果 如 图 12-6 所 示 。 


“英语 ， 外 面 有 引号 ，“ 引 号 内 窝 套 的 引号 ”。” 
k 法 语 ， 外 面 有 引号 ，% 引号 内 诅 套 的 引号 »*。 » 
德语 ， 外 面 有 引号 ，*《 引 号 内 其 套 的 引号 。《 











图 12-6 不 同 语言 下 的 引号 设置 








但 是 ， 如 果 着 眼 于 实际 开发 ， 我 们 是 不 会 遇 到 上 面 这 个 使 用 引号 的 
场景 的 ， 更 常见 的 反而 是 使 用 :lang( ) 伪 类 来 实现 资源 控制 。 例 如 ， 如 
果 是 使 用 国内 的 IP 访 问 ， 则 页 面 输出 的 时 候 可 以 在 <chtml> 元 素 上 设 
置 lang="zh-cmn-Hans"; 如 果 是 使 用 国外 的 IP 访 问 ， 则 可 以 设 
置 lang="en"。 


此 时 ， 我 们 就 可 以 根据 :lang() 的 不 同 使 用 不 同 的 资源 或 者 呈现 不 
一 样 的 布局 了 。 





例如 ， 国 内 的 主要 社交 平台 是 微 信 、 微 博 ， 国 外 的 主要 社区 平台 是 
脸 书 、 推 特 。 此 时 ， 我 们 可 以 借助 :lang() 伪 类 呈现 不 同 的 分 享 内 容 : 


.Cs-share-zh:not(:1lang(zh)), 
.Cs-share-en:not(:lang(en)) { 


display: none; 





从 上 面 这 个 案例 可 以 看 出 ，:1ang() 伪 类 相对 于 [lang] 属 性 选择 器 
有 以 下 两 个 优点 。 





(1) 即使 当前 元 素 没 有 设置 HTML lang 属 性 ， 也 能 够 准确 匹配 。 


(2) 伪 类 参数 中 使 用 的 语言 代码 无 顷 和 HIML lang 属 性 值 一 样 ， 


例如 ，1lang="zh"、1lang="zh-CN"、1lang="zh-SG"、1lang="zh- 
cmn-Hans "都 可 以 使 用 :1ang(zh) 这 个 选择 器 进行 匹配 。 


(3) 鳞 容 性 非常 好 ，: lang() 伪 类 是 一 个 非 币 古老 的 伪 类 ， 正 8 浏 
览 霹 束 已 经 开始 文 持 ， 如 果 遇 到 合适 的 使 用 场景 ， 可 以 放心 使 用 。 


12.4 J 了解 资 源 状 态 伪 类 


这 一 市 介绍 的 几 个 伪 类 尚未 被 浏览 占 文 持 ， 不 过 就 定义 来 看 ， 这 些 
伪 类 还 是 有 用 的 ， 大 家 可 以 先 简单 了 解 一 下 。 


Video/Audio 播 放 状 态 伪 类 :playing 和 :paused 


:playing 伪 类 可 以 匹配 正在 播放 的 首 视频 元 素 ， 如 果 首 视频 因为 
绥 存 的 原因 而 发 生 暂停 ， 同 样 也 是 可 以 匹配 :playing 伪 类 的 。 





:paused 伪 类 可 以 匹配 处 于 停止 状态 的 音 视频 元 素 ， 包 括 处 于 明确 
的 停止 状态 或 者 资源 已 加 载 但 尚未 激活 的 元 素 。 

有 了 这 两 个 伪 类 ， 自 定义 播放 器 的 皮肤 按钮 的 时 候 ， 开 发 成 本 会 小 
很 多 ， 因 为 播放 以 及 暂停 的 状态 已 经 全 部 交 给 浏览 器 原生 解决 ， 我 们 需 
要 做 的 就 是 通过 CSS 匹 配对 应 的 按钮 显示 即 可 。 例 如 : 








.CSs-button-playing, 
.CS-button-paused { 
display: none; 


:playing ~ .cs-button-playing, 


:paused ~ .cs-button-paused { 
display: block; 
} 








这 两 个 伪 类 目前 还 没有 得 到 浏览 占 的 支持 。 


